fix.

src/oj/problem/components/Editor.vue

@@ -17,17 +17,19 @@ code.language = props.problem.languages[0] || "C"
 code.value = props.problem.template[code.language] || SOURCES[code.language]
 
 const editorHeight = computed(() =>
-  isDesktop.value ? "calc(100vh - 150px)" : "calc(100vh - 200px)"
+  isDesktop.value ? "calc(100vh - 133px)" : "calc(100vh - 180px)"
 )
 </script>
 
 <template>
-  <Form :problem="props.problem" />
-  <CodeEditor
-    v-model="code.value"
-    :language="code.language"
-    :height="editorHeight"
-  />
+  <n-space vertical>
+    <Form :problem="props.problem" />
+    <CodeEditor
+      v-model="code.value"
+      :language="code.language"
+      :height="editorHeight"
+    />
+  </n-space>
 </template>
 
 <style scoped></style>

src/oj/problem/components/Form.vue

@@ -39,6 +39,7 @@ function goEdit() {
 const menu: DropdownOption[] = [
   { label: "重置", key: "reset" },
   { label: "提交信息", key: "submissions" },
+  { label: "自测猫", key: "testcat" },
 ]
 
 const options: DropdownOption[] = props.problem.languages.map((it) => ({
@@ -65,22 +66,21 @@ function select(key: string) {
     case "submissions":
       goSubmissions()
       break
+    case "testcat":
+      goTestCat()
+      break
   }
 }
 </script>
 
 <template>
-  <n-form inline label-placement="left">
-    <n-form-item>
-      <n-select
-        class="language"
-        v-model:value="code.language"
-        :options="options"
-      />
-    </n-form-item>
-    <n-form-item>
-      <Submit />
-    </n-form-item>
+  <n-space>
+    <n-select
+      class="language"
+      v-model:value="code.language"
+      :options="options"
+    />
+    <Submit />
     <n-dropdown
       v-if="isMobile"
       trigger="click"
@@ -95,17 +95,17 @@ function select(key: string) {
         </template>
       </n-button>
     </n-dropdown>
-    <n-form-item v-if="isDesktop">
-      <n-space>
-        <n-button @click="reset">重置</n-button>
-        <n-button @click="goSubmissions">提交信息</n-button>
-        <n-button type="info" @click="goTestCat">自测猫</n-button>
-        <n-button type="warning" v-if="userStore.isSuperAdmin" @click="goEdit">
-          编辑
-        </n-button>
-      </n-space>
-    </n-form-item>
-  </n-form>
+    <n-button v-if="isDesktop" @click="reset">重置</n-button>
+    <n-button v-if="isDesktop" @click="goSubmissions">提交信息</n-button>
+    <n-button v-if="isDesktop" type="info" @click="goTestCat">自测猫</n-button>
+    <n-button
+      type="warning"
+      v-if="isDesktop && userStore.isSuperAdmin"
+      @click="goEdit"
+    >
+      编辑
+    </n-button>
+  </n-space>
 </template>
 
 <style scoped>

src/oj/problem/components/ProblemContent.vue

@@ -91,6 +91,7 @@ function type(status: ProblemStatus) {
 
 <template>
   <n-alert
+    class="success"
     v-if="problem.my_status === 0"
     type="success"
     title="🎉 本 题 已 经 被 你 解 决 啦"
@@ -98,7 +99,7 @@ function type(status: ProblemStatus) {
 
   <n-space align="center">
     <n-tag>{{ problem._id }}</n-tag>
-    <h1>{{ problem.title }}</h1>
+    <h1 class="problemTitle">{{ problem.title }}</h1>
   </n-space>
   <p class="title" :style="style">描述</p>
   <div class="content" v-html="problem.description"></div>
@@ -161,9 +162,13 @@ function type(status: ProblemStatus) {
 </template>
 
 <style scoped>
+.problemTitle {
+  margin: 0;
+}
+
 .title {
   font-size: 20px;
-  margin: 24px 0 16px 0;
+  margin: 12px 0;
 }
 
 .testcaseTitle {
@@ -179,4 +184,8 @@ function type(status: ProblemStatus) {
   font-size: 14px;
   white-space: pre;
 }
+
+.success {
+  margin-bottom: 8px;
+}
 </style>