refactor.

src/oj/problem/components/editor.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import loader, { Monaco } from "@monaco-editor/loader"
-import { ref, onBeforeUnmount, onMounted, watch, reactive } from "vue"
+import { ref, onBeforeUnmount, onMounted, watch, reactive, provide } from "vue"
 import {
   LANGUAGE_LABEL,
   LANGUAGE_VALUE,
@@ -10,12 +10,17 @@ import { isMobile } from "../../../utils/breakpoints"
 import { Problem } from "../../../utils/types"
 import EditorExec from "./editor-exec.vue"
 
-const { problem } = defineProps<{ problem: Problem }>()
-const state = reactive({
-  code: SOURCES[problem.languages[0] || "C"],
-  language: problem.languages[0] || "C",
-  isMobile,
+interface Props {
+  problem: Problem
+}
+
+const props = defineProps<Props>()
+const code = reactive({
+  value: SOURCES[props.problem.languages[0] || "C"],
+  language: props.problem.languages[0] || "C",
 })
+provide("code", code)
+
 const monacoEditorRef = ref()
 
 let monaco: Monaco
@@ -29,12 +34,12 @@ onBeforeUnmount(() => {
 })
 
 watch(
-  () => state.language,
+  () => code.language,
   () => {
     if (monaco && monaco.editor) {
       monaco.editor.setModelLanguage(
         monaco.editor.getModels()[0],
-        LANGUAGE_VALUE[state.language]
+        LANGUAGE_VALUE[code.language]
       )
       reset()
     }
@@ -42,30 +47,30 @@ watch(
 )
 
 function reset() {
-  state.code = problem.template[state.language] || SOURCES[state.language]
+  code.value = props.problem.template[code.language] || SOURCES[code.language]
   if (monaco && monaco.editor) {
-    monaco.editor.getModels()[0].setValue(state.code)
+    monaco.editor.getModels()[0].setValue(code.value)
   }
 }
 
 async function init() {
-  state.code = problem.template[state.language] || SOURCES[state.language]
+  code.value = props.problem.template[code.language] || SOURCES[code.language]
   monaco = await loader.init()
   monaco.editor.create(monacoEditorRef.value, {
-    value: state.code, // 编辑器初始显示文字
-    language: LANGUAGE_VALUE[state.language],
-    theme: "vs", // 官方自带三种主题vs, hc-black, or vs-dark
+    value: code.value, // 编辑器初始显示文字
+    language: LANGUAGE_VALUE[code.language],
+    theme: "vs-dark", // 官方自带三种主题vs, hc-black, or vs-dark
     minimap: {
       enabled: false,
     },
     lineNumbersMinChars: 3,
     automaticLayout: true, // 自适应布局
     tabSize: 4,
-    fontSize: state.isMobile ? 20 : 24, // 字体大小
+    fontSize: isMobile.value ? 20 : 24, // 字体大小
     scrollBeyondLastLine: false, // 取消代码后面一大段空白
   })
   monaco.editor.getModels()[0].onDidChangeContent(() => {
-    state.code = monaco.editor.getModels()[0].getValue()
+    code.value = monaco.editor.getModels()[0].getValue()
   })
 }
 </script>
@@ -73,7 +78,7 @@ async function init() {
 <template>
   <el-form inline>
     <el-form-item label="语言" label-width="60">
-      <el-select v-model="state.language" class="language">
+      <el-select v-model="code.language" class="language">
         <el-option
           v-for="item in problem.languages"
           :key="item"
@@ -91,7 +96,7 @@ async function init() {
     ref="monacoEditorRef"
     :class="isMobile ? 'editorMobile' : 'editor'"
   ></section>
-  <EditorExec :state="state" :problem="problem" />
+  <EditorExec />
 </template>
 
 <style scoped>