use composables.

src/shared/Header/index.vue

@@ -4,6 +4,7 @@ import { logout } from "../api"
 import { useUserStore } from "../store/user"
 import { isDark, toggleDark } from "~/shared/composables/dark"
 import { toggleLogin, toggleSignup } from "~/shared/composables/modal"
+import { isDesktop } from "../composables/breakpoints"
 
 const userStore = useUserStore()
 const router = useRouter()
@@ -26,14 +27,19 @@ onMounted(userStore.getMyProfile)
 </script>
 
 <template>
-  <el-menu router mode="horizontal" :default-active="$route.path">
-    <el-menu-item index="/learn">自学</el-menu-item>
+  <el-menu
+    v-if="isDesktop"
+    router
+    mode="horizontal"
+    :default-active="$route.path"
+  >
+    <el-menu-item index="/learn#step-1">自学</el-menu-item>
     <el-menu-item index="/">题库</el-menu-item>
     <el-menu-item index="/contest">比赛</el-menu-item>
     <el-menu-item index="/status">提交</el-menu-item>
     <el-menu-item index="/rank">排名</el-menu-item>
   </el-menu>
-  <el-space class="actions">
+  <el-space v-if="isDesktop" class="actions">
     <el-button
       circle
       :icon="isDark ? Sunny : Moon"

src/shared/Monaco/index.vue

@@ -2,7 +2,7 @@
 import type * as Monaco from "monaco-editor"
 import { LANGUAGE_VALUE } from "utils/constants"
 import { LANGUAGE } from "utils/types"
-import { isMobile } from "utils/breakpoints"
+import { isMobile } from "~/shared/composables/breakpoints"
 import { isDark } from "../composables/dark"
 
 interface Props {
@@ -30,8 +30,7 @@ let editor: Monaco.editor.IStandaloneCodeEditor
 onMounted(function () {
   const model = window.monaco.editor.createModel(
     props.value,
-    LANGUAGE_VALUE[props.language],
-    window.monaco.Uri.parse(`file:///root/${Date.now()}.${ext()}`)
+    LANGUAGE_VALUE[props.language]
   )
 
   editor = window.monaco.editor.create(monacoEditorRef.value, {
@@ -88,25 +87,6 @@ onMounted(function () {
 onUnmounted(() => {
   editor && editor.dispose()
 })
-
-function ext() {
-  switch (props.language) {
-    case "C":
-      return "c"
-    case "C++":
-      return "cpp"
-    case "Java":
-      return "java"
-    case "JavaScript":
-      return "js"
-    case "Python2":
-      return "py"
-    case "Python3":
-      return "py"
-    case "Golang":
-      return "go"
-  }
-}
 </script>
 <template>
   <div

src/shared/Pagination/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isDesktop } from "utils/breakpoints"
+import { isDesktop } from "~/shared/composables/breakpoints"
 interface Props {
   total: number
   limit: number

src/shared/composables/breakpoints.ts

@@ -0,0 +1,6 @@
+import { breakpointsTailwind } from "@vueuse/core"
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
+export const isMobile = breakpoints.smallerOrEqual("md")
+export const isDesktop = breakpoints.greater("md")

src/shared/monaco/index.vue

@@ -2,7 +2,7 @@
 import type * as Monaco from "monaco-editor"
 import { LANGUAGE_VALUE } from "utils/constants"
 import { LANGUAGE } from "utils/types"
-import { isMobile } from "utils/breakpoints"
+import { isMobile } from "~/shared/composables/breakpoints"
 import { isDark } from "../composables/dark"
 
 interface Props {
@@ -30,8 +30,7 @@ let editor: Monaco.editor.IStandaloneCodeEditor
 onMounted(function () {
   const model = window.monaco.editor.createModel(
     props.value,
-    LANGUAGE_VALUE[props.language],
-    window.monaco.Uri.parse(`file:///root/${Date.now()}.${ext()}`)
+    LANGUAGE_VALUE[props.language]
   )
 
   editor = window.monaco.editor.create(monacoEditorRef.value, {
@@ -88,25 +87,6 @@ onMounted(function () {
 onUnmounted(() => {
   editor && editor.dispose()
 })
-
-function ext() {
-  switch (props.language) {
-    case "C":
-      return "c"
-    case "C++":
-      return "cpp"
-    case "Java":
-      return "java"
-    case "JavaScript":
-      return "js"
-    case "Python2":
-      return "py"
-    case "Python3":
-      return "py"
-    case "Golang":
-      return "go"
-  }
-}
 </script>
 <template>
   <div