use composables.

package.json

@@ -27,7 +27,7 @@
     "@types/node": "^18.11.18",
     "@vitejs/plugin-vue": "^4.0.0",
     "monaco-editor": "^0.34.1",
-    "prettier": "^2.8.2",
+    "prettier": "^2.8.3",
     "typescript": "^4.9.4",
     "unplugin-auto-import": "^0.12.1",
     "unplugin-icons": "^0.15.1",

pnpm-lock.yaml

@@ -14,7 +14,7 @@ specifiers:
   normalize.css: ^8.0.1
   party-js: ^2.2.0
   pinia: ^2.0.28
-  prettier: ^2.8.2
+  prettier: ^2.8.3
   typescript: ^4.9.4
   unplugin-auto-import: ^0.12.1
   unplugin-icons: ^0.15.1
@@ -43,7 +43,7 @@ devDependencies:
   '@types/node': 18.11.18
   '@vitejs/plugin-vue': 4.0.0_vite@4.0.4+vue@3.2.45
   monaco-editor: 0.34.1
-  prettier: 2.8.2
+  prettier: 2.8.3
   typescript: 4.9.4
   unplugin-auto-import: 0.12.1_@vueuse+core@9.10.0
   unplugin-icons: 0.15.1
@@ -1266,8 +1266,8 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
-  /prettier/2.8.2:
+  /prettier/2.8.3:
-    resolution: {integrity: sha512-BtRV9BcncDyI2tsuS19zzhzoxD8Dh8LiCx7j7tHzrkz8GFXAexeWFdi22mjE1d16dftH2qNaytVxqiRTGlMfpw==}
+    resolution: {integrity: sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==}
     engines: {node: '>=10.13.0'}
     hasBin: true
     dev: true

src/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ElAlert: typeof import('element-plus/es')['ElAlert']
+    ElAside: typeof import('element-plus/es')['ElAside']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']

src/learn/components/Loading.vue

@@ -0,0 +1 @@
+<template>loading...</template>

src/learn/index.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
-import Md from "./step-1/index.md"
+import Loading from "./components/Loading.vue"
 import Monaco from "../shared/monaco/index.vue"
 
 const route = useRoute()
-// console.log(route.params.step)
+const step = route.hash.replace("#step-", "") || "1"
+
+const Md = defineAsyncComponent({
+  loader: () => import(`./step-${step}/index.md`),
+  loadingComponent: Loading,
+})
 
 const code = ref("")
 
@@ -14,13 +19,10 @@ function change(value: string) {
 
 <template>
   <el-row>
-    <el-col :span="4"> </el-col>
     <el-col :span="12">
       <Md />
-      {{ code }}
     </el-col>
-    <!-- TODO: 这里有BUG -->
+    <el-col :span="12">
-    <el-col :span="8">
       <Monaco :value="code" @change="change" />
     </el-col>
   </el-row>

src/learn/step-1/index.md

@@ -1 +1,9 @@
-ceshi
+# 我的是第一步骤
+
+```c
+#include<stdio.h>
+
+int main() {
+   return 0;
+}
+```

src/oj/problem/components/ProblemInfo.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { DIFFICULTY } from "utils/constants"
 import { getACRate, getTagColor, parseTime } from "utils/functions"
-import { isDesktop } from "utils/breakpoints"
+import { isDesktop } from "~/shared/composables/breakpoints"
 import { Problem } from "utils/types"
 
 interface Props {

src/oj/problem/components/SubmitPanel.vue

@@ -188,7 +188,7 @@ defineExpose({ submit })
         :title="JUDGE_STATUS[submission.result]['name']"
       >
       </el-alert>
-      <el-scrollbar v-if="msg" height="354" class="result" noresize>
+      <el-scrollbar v-if="msg" height="354" class="result">
         <div>{{ msg }}</div>
       </el-scrollbar>
       <el-table

src/oj/problem/detail.vue

@@ -4,7 +4,7 @@ import ProblemContent from "./components/ProblemContent.vue"
 import ProblemInfo from "./components/ProblemInfo.vue"
 import SubmissionList from "./components/SubmissionList.vue"
 import { getProblem } from "oj/api"
-import { isDesktop, isMobile } from "utils/breakpoints"
+import { isDesktop, isMobile } from "~/shared/composables/breakpoints"
 
 interface Props {
   problemID: string
@@ -25,7 +25,7 @@ provide("problem", readonly(problem))
     <el-col :span="isDesktop ? 12 : 24">
       <el-tabs type="border-card">
         <el-tab-pane label="题目描述">
-          <el-scrollbar v-if="isDesktop" height="calc(100vh - 171px)" noresize>
+          <el-scrollbar v-if="isDesktop" height="calc(100vh - 171px)">
             <ProblemContent :problem="problem" />
           </el-scrollbar>
           <ProblemContent v-else :problem="problem" />

src/oj/problem/list.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useUserStore } from "~/shared/store/user"
 import { filterEmptyValue, getTagColor } from "utils/functions"
-import { isDesktop } from "utils/breakpoints"
+import { isDesktop } from "~/shared/composables/breakpoints"
 import { getProblemList, getProblemTagList, getRandomProblemID } from "oj/api"
 
 import Pagination from "~/shared/Pagination/index.vue"

src/routes.ts

@@ -40,13 +40,12 @@ export const routes = [
         path: "rank",
         component: () => import("oj/rank/list.vue"),
       },
+      {
+        path: "learn",
+        component: () => import("learn/index.vue"),
+      },
     ],
   },
-  {
-    path: "/learn",
-    component: () => import("~/shared/layout/default.vue"),
-    children: [{ path: "", component: () => import("learn/index.vue") }],
-  },
   {
     path: "/admin",
     component: () => import("~/shared/layout/admin.vue"),

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
-    <el-menu-item index="/learn">自学</el-menu-item>
+    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],
+    LANGUAGE_VALUE[props.language]
-    window.monaco.Uri.parse(`file:///root/${Date.now()}.${ext()}`)
   )
 
   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/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],
+    LANGUAGE_VALUE[props.language]
-    window.monaco.Uri.parse(`file:///root/${Date.now()}.${ext()}`)
   )
 
   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

vite.config.ts

@@ -15,7 +15,6 @@ const proxyConfig = {
   headers: { Referer: url },
 }
 
-// https://vitejs.dev/config/
 export default defineConfig({
   resolve: {
     alias: {