add monaco editor.

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>