add monaco editor.

components.d.ts

@@ -9,6 +9,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ElAlert: typeof import('element-plus/es')['ElAlert']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDialog: typeof import('element-plus/es')['ElDialog']
@@ -25,10 +26,13 @@ declare module '@vue/runtime-core' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSpace: typeof import('element-plus/es')['ElSpace']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     IEpSelect: typeof import('~icons/ep/select')['default']
     IEpSemiSelect: typeof import('~icons/ep/semi-select')['default']

package-lock.json

@@ -11,6 +11,7 @@
         "@element-plus/icons-vue": "^2.0.10",
         "axios": "^1.2.2",
         "element-plus": "^2.2.28",
+        "monaco-editor": "^0.34.1",
         "pinia": "^2.0.28",
         "vue": "^3.2.45",
         "vue-router": "^4.1.6"
@@ -1427,6 +1428,11 @@
         "ufo": "^1.0.0"
       }
     },
+    "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=="
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
@@ -3112,6 +3118,11 @@
         "ufo": "^1.0.0"
       }
     },
+    "monaco-editor": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.34.1.tgz",
+      "integrity": "sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",

package.json

@@ -13,6 +13,7 @@
     "@element-plus/icons-vue": "^2.0.10",
     "axios": "^1.2.2",
     "element-plus": "^2.2.28",
+    "monaco-editor": "^0.34.1",
     "pinia": "^2.0.28",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"

src/oj/api.ts

@@ -58,7 +58,7 @@ export function getRandomProblemID() {
   return http.get("pickone")
 }
 
-export function getProblem(id: number) {
+export function getProblem(id: string) {
   return http.get("problem", {
     params: { problem_id: id },
   })

src/oj/components/editor.vue

@@ -0,0 +1,78 @@
+<template>
+  <el-select v-model="language">
+    <el-option value="c">C</el-option>
+    <el-option value="python">Python</el-option>
+  </el-select>
+  <div ref="monacoEditorRef" style="height: 300px"></div>
+</template>
+<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 } from "vue"
+
+const text = ref("")
+const monacoEditorRef = ref()
+const language = ref("C")
+
+// @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()
+  },
+}
+
+onBeforeUnmount(() => {
+  editor.dispose()
+})
+
+onMounted(() => {
+  editorInit()
+})
+
+let editor: monaco.editor.IStandaloneCodeEditor
+
+function editorInit() {
+  nextTick(() => {
+    !editor
+      ? (editor = monaco.editor.create(monacoEditorRef.value, {
+          value: text.value, // 编辑器初始显示文字
+          language: "python", // 语言支持自行查阅demo
+          automaticLayout: true, // 自适应布局
+          theme: "vs", // 官方自带三种主题vs, hc-black, or vs-dark
+          foldingStrategy: "indentation",
+          renderLineHighlight: "all", // 行亮
+          selectOnLineNumbers: true, // 显示行号
+          minimap: {
+            enabled: false,
+          },
+          readOnly: false, // 只读
+          fontSize: 16, // 字体大小
+          scrollBeyondLastLine: false, // 取消代码后面一大段空白
+          overviewRulerBorder: false, // 不要滚动条的边框
+        }))
+      : editor.setValue("")
+    // 监听值的变化
+    editor.onDidChangeModelContent(() => {
+      text.value = editor.getValue()
+    })
+  })
+}
+</script>
+<style scoped></style>

src/oj/problem/detail.vue

@@ -1,5 +1,34 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted } from "vue"
+import { useRoute } from "vue-router"
+import Editor from "../components/editor.vue"
+import { getProblem } from "../api"
 
-<template>problem id</template>
+const route = useRoute()
+
+async function init() {
+  const id = route.params.id as string
+  const res = await getProblem(id)
+  console.log(res.data)
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+
+<template>
+  <el-row>
+    <el-col :span="12">
+      <el-tabs type="border-card">
+        <el-tab-pane label="题目描述">1</el-tab-pane>
+        <el-tab-pane label="提交信息">2</el-tab-pane>
+      </el-tabs>
+    </el-col>
+    <el-col :span="12">
+      <Editor />
+    </el-col>
+  </el-row>
+</template>
 
 <style scoped></style>