add editor.

package-lock.json

@@ -9,9 +9,9 @@
       "version": "0.0.0",
       "dependencies": {
         "@element-plus/icons-vue": "^2.0.10",
+        "@monaco-editor/loader": "^1.3.2",
         "axios": "^1.2.2",
         "element-plus": "^2.2.28",
-        "monaco-editor": "^0.34.1",
         "normalize.css": "^8.0.1",
         "pinia": "^2.0.28",
         "vue": "^3.2.45",
@@ -472,6 +472,17 @@
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
       "dev": true
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmmirror.com/@monaco-editor/loader/-/loader-1.3.2.tgz",
+      "integrity": "sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1432,7 +1443,8 @@
     "node_modules/monaco-editor": {
       "version": "0.34.1",
       "resolved": "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.34.1.tgz",
-      "integrity": "sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ=="
+      "integrity": "sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ==",
+      "peer": true
     },
     "node_modules/ms": {
       "version": "2.1.2",
@@ -1775,6 +1787,11 @@
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
       "deprecated": "Please use @jridgewell/sourcemap-codec instead"
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/strip-final-newline": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
@@ -2363,6 +2380,14 @@
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
       "dev": true
     },
+    "@monaco-editor/loader": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmmirror.com/@monaco-editor/loader/-/loader-1.3.2.tgz",
+      "integrity": "sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==",
+      "requires": {
+        "state-local": "^1.0.6"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3127,7 +3152,8 @@
     "monaco-editor": {
       "version": "0.34.1",
       "resolved": "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.34.1.tgz",
-      "integrity": "sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ=="
+      "integrity": "sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ==",
+      "peer": true
     },
     "ms": {
       "version": "2.1.2",
@@ -3374,6 +3400,11 @@
       "resolved": "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
+    "state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "strip-final-newline": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz",

package.json

@@ -11,9 +11,9 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.10",
+    "@monaco-editor/loader": "^1.3.2",
     "axios": "^1.2.2",
     "element-plus": "^2.2.28",
-    "monaco-editor": "^0.34.1",
     "normalize.css": "^8.0.1",
     "pinia": "^2.0.28",
     "vue": "^3.2.45",

src/main.ts

@@ -3,10 +3,12 @@ import { createRouter, createWebHistory } from "vue-router"
 import { createPinia } from "pinia"
 import "normalize.css"
 import "element-plus/theme-chalk/display.css"
-import App from "./App.vue"
+import loader from "@monaco-editor/loader"
 
+import App from "./App.vue"
 import Home from "./oj/index.vue"
 import Problems from "./oj/problem/list.vue"
+
 import storage from "./utils/storage"
 import { STORAGE_KEY } from "./utils/constants"
 import { useLoginStore } from "./shared/stores/login"
@@ -18,7 +20,7 @@ const routes = [
     children: [
       { path: "", component: Problems },
       {
-        path: "problem/:id",
+        path: "problem/:problemID",
         component: () => import("./oj/problem/detail.vue"),
       },
       {
@@ -27,7 +29,7 @@ const routes = [
         meta: { requiresAuth: true },
       },
       {
-        path: "status/:id",
+        path: "status/:statusID",
         component: () => import("./oj/status/detail.vue"),
       },
       {
@@ -36,7 +38,7 @@ const routes = [
         meta: { requiresAuth: true },
       },
       {
-        path: "contest/:id",
+        path: "contest/:contestID",
         component: () => import("./oj/contest/detail.vue"),
       },
       {
@@ -69,6 +71,11 @@ router.beforeEach((to, from, next) => {
 
 const pinia = createPinia()
 
+loader.config({
+  paths: { vs: "https://cdn.staticfile.org/monaco-editor/0.34.1/min/vs" },
+  "vs/nls": { availableLanguages: { "*": "zh-cn" } },
+})
+
 const app = createApp(App)
 app.use(router)
 app.use(pinia)

src/oj/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Login from "../shared/user/login.vue"
-import Signup from "./user/signup.vue"
+import Signup from "./components/signup.vue"
 import Header from "./components/header.vue"
 </script>
 

src/oj/problem/components/editor.vue

@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import loader, { Monaco } from "@monaco-editor/loader"
+import { ref, onBeforeUnmount, onMounted, watch, reactive } from "vue"
+import { onBeforeRouteLeave, useRoute } from "vue-router"
+import {
+  buildProblemCodeKey,
+  LANGUAGE,
+  languageLabel,
+  languageValue,
+} from "../../../utils/constants"
+import storage from "../../../utils/storage"
+
+const route = useRoute()
+const { languages, template } = defineProps<{
+  languages: Array<LANGUAGE>
+  template: { [key in LANGUAGE]?: string }
+}>()
+
+const state = reactive({
+  value: "",
+  language: languages[0] || "C",
+  theme: "vs",
+})
+
+const monacoEditorRef = ref()
+
+let monaco: Monaco
+
+function reset() {
+  if (monaco && monaco.editor) {
+    monaco.editor.getModels()[0].setValue(template[state.language] || "")
+  }
+}
+
+onMounted(() => {
+  initValue()
+  initEditor()
+})
+
+onBeforeUnmount(() => {
+  monaco.editor.getModels().forEach((model) => model.dispose())
+})
+
+onBeforeRouteLeave(() => {
+  const key = buildProblemCodeKey(
+    route.params.problemID as string,
+    route.params.contestID as string
+  )
+  storage.set(key, {
+    code: state.value,
+    language: state.language,
+    theme: state.theme,
+  })
+})
+
+watch(
+  () => state.language,
+  () => {
+    if (monaco && monaco.editor) {
+      monaco.editor.setModelLanguage(
+        monaco.editor.getModels()[0],
+        languageValue[state.language]
+      )
+    }
+  }
+)
+
+function initValue() {
+  const key = buildProblemCodeKey(
+    route.params.problemID as string,
+    route.params.contestID as string
+  )
+  const problemCode = storage.get(key)
+  if (problemCode) {
+    state.value = problemCode.code
+    state.language = problemCode.language
+    state.theme = problemCode.theme
+  }
+  if (!state.value && template[state.language]) {
+    state.value = template[state.language] || ""
+  }
+}
+
+async function initEditor() {
+  monaco = await loader.init()
+  monaco.editor.create(monacoEditorRef.value, {
+    value: state.value, // 编辑器初始显示文字
+    language: languageValue[state.language],
+    automaticLayout: true, // 自适应布局
+    theme: state.theme, // 官方自带三种主题vs, hc-black, or vs-dark
+    minimap: {
+      enabled: false,
+    },
+    fontSize: 24, // 字体大小
+    scrollBeyondLastLine: false, // 取消代码后面一大段空白
+    overviewRulerBorder: false, // 不要滚动条的边框
+  })
+  // 监听值的变化
+  monaco.editor.getModels()[0].onDidChangeContent(() => {
+    console.log(1)
+    state.value = monaco.editor.getModels()[0].getValue()
+  })
+}
+</script>
+
+<template>
+  <el-form :inline="true">
+    <el-form-item label="语言" label-width="60">
+      <el-select v-model="state.language" class="language">
+        <el-option
+          v-for="item in languages"
+          :key="item"
+          :value="item"
+          :label="languageLabel[item]"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item>
+      <el-button @click="reset">重置</el-button>
+    </el-form-item>
+  </el-form>
+  <div ref="monacoEditorRef" class="editor"></div>
+  <el-tabs type="border-card">
+    <el-tab-pane label="测试用例"> 1 </el-tab-pane>
+    <el-tab-pane label="执行结果"> 2 </el-tab-pane>
+  </el-tabs>
+  <el-form class="actions">
+    <el-form-item>
+      <el-button>运行</el-button>
+      <el-button type="primary">提交</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<style scoped>
+.language {
+  width: 100px;
+}
+
+.editor {
+  height: 500px;
+}
+.actions {
+  margin-top: 16px;
+  float: right;
+}
+</style>

src/oj/problem/components/problem-content.vue

@@ -16,7 +16,7 @@ const { problem } = defineProps(["problem"])
 
     <div v-if="problem.hint">
       <p class="title">提示</p>
-      <el-card shadow="none">
+      <el-card shadow="never">
         <div class="content" v-html="problem.hint"></div>
       </el-card>
     </div>

src/oj/problem/components/problem-info.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { defineProps } from "vue"
-import { DIFFICULTY, getTagColor } from "../../utils/constants"
-import { getACRate } from "../../utils/functions"
+import { DIFFICULTY, getTagColor } from "../../../utils/constants"
+import { getACRate } from "../../../utils/functions"
 
 const { problem } = defineProps(["problem"])
 </script>

src/oj/problem/detail.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue"
 import { useRoute } from "vue-router"
-import Editor from "./editor.vue"
+import Editor from "./components/editor.vue"
 import { getProblem } from "../api"
-import ProblemContent from "./problem-content.vue"
-import ProblemInfo from "./problem-info.vue"
+import ProblemContent from "./components/problem-content.vue"
+import ProblemInfo from "./components/problem-info.vue"
 
 const route = useRoute()
-const code = ref("print('hello world')")
-const language = ref("C")
+const contestID = route.params.contestID as string
+const problemID = route.params.problemID as string
+
 const problem = ref({
+  _id: 0,
   created_by: {},
   io_mode: {},
   languages: [],
@@ -20,8 +22,7 @@ const problem = ref({
 })
 
 async function init() {
-  const id = route.params.id as string
-  const res = await getProblem(id)
+  const res = await getProblem(problemID)
   problem.value = res.data
 }
 
@@ -31,21 +32,21 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-row>
+  <el-row v-if="problem._id">
     <el-col :span="14">
       <el-tabs type="border-card">
         <el-tab-pane label="题目描述">
           <ProblemContent :problem="problem" />
         </el-tab-pane>
-        <el-tab-pane label="比赛信息"></el-tab-pane>
+        <el-tab-pane label="比赛信息" v-if="contestID"></el-tab-pane>
         <el-tab-pane label="题目信息">
           <ProblemInfo :problem="problem" />
         </el-tab-pane>
-        <el-tab-pane label="提交信息">3</el-tab-pane>
+        <el-tab-pane label="提交情况">3</el-tab-pane>
       </el-tabs>
     </el-col>
     <el-col :span="10">
-      <Editor :value="code" :language="language" />
+      <Editor :languages="problem.languages" :template="problem.template" />
     </el-col>
   </el-row>
 </template>

src/oj/problem/editor.vue

@@ -1,134 +0,0 @@
-<script lang="ts" setup>
-import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"
-import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"
-import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"
-import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"
-import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"
-
-import * as monaco from "monaco-editor"
-import {
-  nextTick,
-  ref,
-  onBeforeUnmount,
-  onMounted,
-  watch,
-  defineProps,
-} from "vue"
-
-const props = defineProps(["value", "language"])
-
-const value = ref(props.value || "")
-const language = ref(props.language || "C")
-
-const monacoEditorRef = ref()
-
-// @ts-ignore
-self.MonacoEnvironment = {
-  getWorker(workerId: string, label: string) {
-    if (label === "json") {
-      return new jsonWorker()
-    }
-    if (label === "css" || label === "scss" || label === "less") {
-      return new cssWorker()
-    }
-    if (label === "html" || label === "handlebars" || label === "razor") {
-      return new htmlWorker()
-    }
-    if (label === "typescript" || label === "javascript") {
-      return new tsWorker()
-    }
-    return new editorWorker()
-  },
-}
-
-function reset() {
-  if (editor) {
-    editor.getModel()!.setValue(props.value || "")
-  }
-}
-
-onBeforeUnmount(() => {
-  editor && editor.dispose()
-})
-
-onMounted(() => {
-  editorInit()
-})
-
-watch(language, () => {
-  if (editor) {
-    monaco.editor.setModelLanguage(
-      editor.getModel()!,
-      language.value.toLowerCase()
-    )
-  }
-})
-
-let editor: monaco.editor.IStandaloneCodeEditor
-
-function editorInit() {
-  nextTick(() => {
-    if (editor) {
-      editor.setValue("")
-    } else {
-      editor = monaco.editor.create(monacoEditorRef.value, {
-        value: value.value, // 编辑器初始显示文字
-        language: language.value.toLowerCase(),
-        automaticLayout: true, // 自适应布局
-        theme: "vs", // 官方自带三种主题vs, hc-black, or vs-dark
-        minimap: {
-          enabled: false,
-        },
-        fontSize: 24, // 字体大小
-        scrollBeyondLastLine: false, // 取消代码后面一大段空白
-        overviewRulerBorder: false, // 不要滚动条的边框
-      })
-    }
-    // 监听值的变化
-    editor.onDidChangeModelContent(() => {
-      value.value = editor.getValue()
-    })
-  })
-}
-</script>
-
-<template>
-  <el-form :inline="true">
-    <el-form-item label="语言" label-width="60">
-      <el-select class="language" v-model="language">
-        <el-option value="C">C</el-option>
-        <el-option value="Python">Python</el-option>
-        <el-option value="CPP">C++</el-option>
-        <el-option value="Java">Java</el-option>
-      </el-select>
-    </el-form-item>
-    <el-form-item>
-      <el-button @click="reset">重置</el-button>
-    </el-form-item>
-  </el-form>
-  <div ref="monacoEditorRef" class="editor"></div>
-  <el-tabs type="border-card">
-    <el-tab-pane label="测试用例"> 1 </el-tab-pane>
-    <el-tab-pane label="执行结果"> 2 </el-tab-pane>
-  </el-tabs>
-  <el-form class="actions">
-    <el-form-item>
-      <el-button>运行</el-button>
-      <el-button type="primary">提交</el-button>
-    </el-form-item>
-  </el-form>
-</template>
-
-<style scoped>
-.language {
-  width: 100px;
-}
-
-.editor {
-  height: 500px;
-}
-.actions {
-  margin-top: 16px;
-  float: right;
-}
-</style>

src/utils/code-templates.ts

@@ -0,0 +1,55 @@
+export const cSource =
+  '#include<stdio.h>\r\n\r\nint main()\r\n{\r\n    printf("黄岩一职");\r\n    return 0;\r\n}'
+export const cppSource =
+  '#include<iostream>\r\n\r\nusing namespace std;\r\n\r\nint main()\r\n{\r\n    cout<<"黄岩一职"<<endl;\r\n    return 0;\r\n}'
+export const pythonSource = 'print("黄岩一职")'
+export const javaSource =
+  'public class Main {\r\n    public static void main(String[] args) {\r\n        System.out.println("黄岩一职");\r\n    }\r\n}'
+
+export const sources = {
+  50: cSource,
+  54: cppSource,
+  62: javaSource,
+  71: pythonSource,
+}
+
+export const language = {
+  50: "c",
+  54: "cpp",
+  62: "java",
+  71: "python",
+}
+
+export const deadResults = {
+  50: {
+    encoded:
+      "I2luY2x1ZGU8c3RkaW8uaD4NCg0KaW50IG1haW4oKQ0Kew0KICAgIHByaW50Zigi6buE5bKp5LiA6IGMIik7DQogICAgcmV0dXJuIDA7DQp9",
+    result: {
+      status: 3,
+      output: "黄岩一职",
+    },
+  },
+  54: {
+    encoded:
+      "I2luY2x1ZGU8aW9zdHJlYW0+DQoNCnVzaW5nIG5hbWVzcGFjZSBzdGQ7DQoNCmludCBtYWluKCkNCnsNCiAgICBjb3V0PDwi6buE5bKp5LiA6IGMIjw8ZW5kbDsNCiAgICByZXR1cm4gMDsNCn0=",
+    result: {
+      status: 3,
+      output: "黄岩一职",
+    },
+  },
+  71: {
+    encoded: "cHJpbnQoIum7hOWyqeS4gOiBjCIp",
+    result: {
+      status: 3,
+      output: "黄岩一职",
+    },
+  },
+  62: {
+    encoded:
+      "cHVibGljIGNsYXNzIE1haW4gew0KICAgIHB1YmxpYyBzdGF0aWMgdm9pZCBtYWluKFN0cmluZ1tdIGFyZ3MpIHsNCiAgICAgICAgU3lzdGVtLm91dC5wcmludGxuKCLpu4TlsqnkuIDogYwiKTsNCiAgICB9DQp9",
+    result: {
+      status: 3,
+      output: "黄岩一职",
+    },
+  },
+}

src/utils/constants.ts

@@ -136,9 +136,31 @@ export function getTagColor(tag: string) {
   }[tag]
 }
 
-export function buildProblemCodeKey(problemID: number, contestID = null) {
+export function buildProblemCodeKey(problemID: string, contestID = "") {
   if (contestID) {
     return `${STORAGE_KEY.PROBLEM_CODE}_${contestID}_${problemID}`
   }
   return `${STORAGE_KEY.PROBLEM_CODE}_NaN_${problemID}`
 }
+
+export const languageLabel = {
+  C: "C",
+  "C++": "C++",
+  Java: "Java",
+  Python2: "Python2",
+  Python3: "Python",
+  JavaScript: "JS",
+  Golang: "Go",
+}
+
+export type LANGUAGE = keyof typeof languageLabel
+
+export const languageValue = {
+  C: "c",
+  "C++": "cpp",
+  Java: "java",
+  Python2: "python",
+  Python3: "python",
+  JavaScript: "javascript",
+  Golang: "go",
+}

vite.config.ts

@@ -1,17 +1,17 @@
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import AutoImport from "unplugin-auto-import/vite";
-import Components from "unplugin-vue-components/vite";
-import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
-import IconsResolver from "unplugin-icons/resolver";
-import Icons from "unplugin-icons/vite";
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+import AutoImport from "unplugin-auto-import/vite"
+import Components from "unplugin-vue-components/vite"
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
+import IconsResolver from "unplugin-icons/resolver"
+import Icons from "unplugin-icons/vite"
 
-const url = "https://oj.hyyz.izhai.net";
+const url = "https://oj.hyyz.izhai.net"
 const proxyConfig = {
   target: url,
   changeOrigin: true,
   headers: { Referer: url },
-};
+}
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -34,4 +34,4 @@ export default defineConfig({
       "/public": proxyConfig,
     },
   },
-});
+})