switch screen size.

src/auto-imports.d.ts

@@ -41,6 +41,7 @@ declare global {
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
+  const injectLocal: typeof import('@vueuse/core')['injectLocal']
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
@@ -75,6 +76,7 @@ declare global {
   const onUpdated: typeof import('vue')['onUpdated']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
+  const provideLocal: typeof import('@vueuse/core')['provideLocal']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']

src/oj/problem/detail.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
 import { getProblem } from "oj/api"
 import { isDesktop } from "~/shared/composables/breakpoints"
+import { screenMode } from "~/shared/composables/switchScreen"
 import { problem } from "../composables/problem"
+import { ScreenMode } from "utils/constants"
 
 const Editor = defineAsyncComponent(() => import("./components/Editor.vue"))
 const ProblemContent = defineAsyncComponent(
-  () => import("./components/ProblemContent.vue")
+  () => import("./components/ProblemContent.vue"),
 )
 const ProblemInfo = defineAsyncComponent(
-  () => import("./components/ProblemInfo.vue")
+  () => import("./components/ProblemInfo.vue"),
 )
 const ProblemSubmission = defineAsyncComponent(
-  () => import("./components/ProblemSubmission.vue")
+  () => import("./components/ProblemSubmission.vue"),
 )
 
 interface Props {
@@ -44,8 +46,17 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <n-grid v-if="problem" x-gap="16" :cols="2">
-    <n-gi :span="isDesktop ? 1 : 2">
+  <n-grid
+    v-if="problem"
+    x-gap="16"
+    :cols="screenMode === ScreenMode.both ? 2 : 1"
+  >
+    <n-gi
+      :span="isDesktop ? 1 : 2"
+      v-show="
+        screenMode === ScreenMode.both || screenMode === ScreenMode.problem
+      "
+    >
       <n-scrollbar v-if="isDesktop" style="max-height: calc(100vh - 92px)">
         <n-tabs default-value="content" type="segment">
           <n-tab-pane name="content" tab="题目描述">
@@ -74,7 +85,10 @@ onBeforeUnmount(() => {
         </n-tab-pane>
       </n-tabs>
     </n-gi>
-    <n-gi v-if="isDesktop">
+    <n-gi
+      v-if="isDesktop"
+      v-show="screenMode === ScreenMode.both || screenMode === ScreenMode.code"
+    >
       <Editor />
     </n-gi>
   </n-grid>

src/shared/Header.vue

@@ -6,6 +6,7 @@ import { isDark, toggleDark } from "~/shared/composables/dark"
 import { toggleLogin, toggleSignup } from "~/shared/composables/modal"
 import { RouterLink } from "vue-router"
 import { isDesktop, isMobile } from "~/shared/composables/breakpoints"
+import { screenSwitchLabel, switchScreenMode } from "~/shared/composables/switchScreen"
 import { code } from "~/shared/composables/learn"
 import { useLearnStore } from "~/learn/store"
 
@@ -95,6 +96,8 @@ function run() {
 function goHome() {
   router.push("/")
 }
+
+function switchScreen() {}
 </script>
 
 <template>
@@ -131,6 +134,15 @@ function goHome() {
       <n-dropdown v-if="isMobile" :options="menus" trigger="click">
         <n-button>菜单</n-button>
       </n-dropdown>
+      <n-button
+        v-if="
+          isDesktop &&
+          (route.name === 'problem' || route.name === 'contest problem')
+        "
+        @click="switchScreenMode"
+      >
+        {{ screenSwitchLabel }}
+      </n-button>
       <div v-if="userStore.isFinished">
         <n-dropdown
           v-if="userStore.isAuthed"

src/shared/composables/switchScreen.ts

@@ -0,0 +1,17 @@
+import { ScreenMode } from "~/utils/constants"
+
+export const screenMode = ref(ScreenMode.both)
+
+export const screenSwitchLabel = computed(() => {
+  if (screenMode.value === ScreenMode.both) return "题目 | 代码"
+  else if (screenMode.value === ScreenMode.problem) return "仅题目"
+  return "仅代码"
+})
+
+export function switchScreenMode() {
+  if (screenMode.value === ScreenMode.both) {
+    screenMode.value = ScreenMode.problem
+    return
+  }
+  screenMode.value += 1
+}

src/utils/constants.ts

@@ -267,3 +267,9 @@ export const CODE_TEMPLATES = {
   JavaScript: blankTemplate,
   Golang: blankTemplate,
 }
+
+export enum ScreenMode {
+  problem,
+  code,
+  both,
+}