fix

public/style.css

@@ -7,6 +7,10 @@
   z-index: 100 !important;
 }
 
+.md-editor-preview img {
+  height: auto;
+}
+
 .md-editor-preview h1 {
   font-size: 1.6rem !important;
 }

src/oj/problem/detail.vue

@@ -117,9 +117,17 @@ watch(isMobile, (value) => {
 </script>
 
 <template>
-  <n-grid v-if="problem" x-gap="16" :cols="screenModeStore.isBothMode ? 7 : 1">
-    <n-gi :span="isDesktop ? 3 : 7" v-if="shouldShowProblem">
-      <n-scrollbar v-if="isDesktop" style="max-height: calc(100vh - 92px)">
+  <template v-if="problem">
+    <n-split
+      v-if="isDesktop && screenModeStore.isBothMode"
+      direction="horizontal"
+      :default-size="0.43"
+      :min="0.2"
+      :max="0.8"
+      style="height: calc(100vh - 92px)"
+    >
+      <template #1>
+        <n-scrollbar style="height: 100%">
           <n-tabs v-model:value="currentTab" type="segment">
             <n-tab-pane name="content" tab="题目描述">
               <ProblemContent />
@@ -155,6 +163,58 @@ watch(isMobile, (value) => {
             </n-tab-pane>
           </n-tabs>
         </n-scrollbar>
+      </template>
+      <template #2>
+        <component :is="inProblem ? ProblemEditor : ContestEditor" />
+      </template>
+    </n-split>
+
+    <!-- Desktop: code only mode -->
+    <template v-else-if="isDesktop && screenModeStore.isCodeOnlyMode">
+      <EditorForTest />
+    </template>
+
+    <!-- Desktop: problem only mode -->
+    <template v-else-if="isDesktop && shouldShowProblem">
+      <n-scrollbar style="max-height: calc(100vh - 92px)">
+        <n-tabs v-model:value="currentTab" type="segment">
+          <n-tab-pane name="content" tab="题目描述">
+            <ProblemContent />
+          </n-tab-pane>
+          <n-tab-pane
+            v-if="problem.show_flowchart && problem.mermaid_code"
+            name="flowchart"
+            tab="流程图表"
+          >
+            <ProblemFlowchart />
+          </n-tab-pane>
+          <n-tab-pane
+            name="info"
+            tab="题目统计"
+            :disabled="!!props.problemSetId"
+          >
+            <ProblemInfo />
+          </n-tab-pane>
+          <n-tab-pane
+            v-if="!props.contestID"
+            name="comment"
+            tab="题目点评"
+            :disabled="!!props.problemSetId"
+          >
+            <ProblemComment />
+          </n-tab-pane>
+          <n-tab-pane
+            name="submission"
+            tab="我的提交"
+            :disabled="!!props.problemSetId"
+          >
+            <ProblemSubmission />
+          </n-tab-pane>
+        </n-tabs>
+      </n-scrollbar>
+    </template>
+
+    <!-- Mobile -->
     <n-tabs v-else v-model:value="currentTab" type="segment">
       <n-tab-pane name="content" tab="描述">
         <ProblemContent />
@@ -184,13 +244,6 @@ watch(isMobile, (value) => {
         <ProblemSubmission />
       </n-tab-pane>
     </n-tabs>
-    </n-gi>
-    <n-gi :span="4" v-if="isDesktop && screenModeStore.isBothMode">
-      <component :is="inProblem ? ProblemEditor : ContestEditor" />
-    </n-gi>
-    <n-gi v-if="isDesktop && screenModeStore.isCodeOnlyMode">
-      <EditorForTest />
-    </n-gi>
-  </n-grid>
+  </template>
   <n-empty v-else :description="errMsg"></n-empty>
 </template>

src/utils/constants.ts

@@ -239,9 +239,9 @@ export const CODE_TEMPLATES = {
 } as const
 
 export enum ScreenMode {
-  both = "题目 | 自测",
-  code = "仅自测",
-  problem = "仅题目",
+  both = "双栏",
+  code = "自测",
+  problem = "题目",
 }
 
 export enum ChartType {