add create a problem.

src/oj/problem/components/Editor.vue

@@ -15,10 +15,6 @@ const props = defineProps<Props>()
 code.language = props.problem.languages[0] || "C"
 code.value = props.problem.template[code.language] || SOURCES[code.language]
 
-function change(value: string) {
-  code.value = value
-}
-
 const editorHeight = computed(() =>
   isDesktop.value ? "calc(100vh - 150px)" : "calc(100vh - 200px)"
 )
@@ -28,9 +24,8 @@ const editorHeight = computed(() =>
   <Form :problem="props.problem" />
   <Monaco
     class="editor"
+    v-model:value="code.value"
     :language="code.language"
-    :value="code.value"
-    @change="change"
     :height="editorHeight"
   />
 </template>

src/oj/problem/components/Form.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { DropdownOption } from "naive-ui"
-import { SOURCES } from "utils/constants"
+import { LANGUAGE_SHOW_VALUE, SOURCES } from "utils/constants"
 import { Problem } from "utils/types"
 import { code } from "oj/composables/code"
 import { isDesktop, isMobile } from "~/shared/composables/breakpoints"
@@ -47,7 +47,7 @@ const options: DropdownOption[] = props.problem.languages.map((it) => ({
         transform: "translateY(3px)",
       },
     }),
-    it,
+    LANGUAGE_SHOW_VALUE[it],
   ],
   value: it,
 }))

src/oj/submission/detail.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { getSubmission } from "oj/api"
 import { Submission } from "utils/types"
-import { JUDGE_STATUS, LANGUAGE_VALUE } from "utils/constants"
+import { JUDGE_STATUS, LANGUAGE_FORMAT_VALUE } from "utils/constants"
 import {
   parseTime,
   submissionMemoryFormat,
@@ -73,7 +73,7 @@ onMounted(init)
       </n-space>
       <n-code
         class="code"
-        :language="LANGUAGE_VALUE[submission.language]"
+        :language="LANGUAGE_FORMAT_VALUE[submission.language]"
         :code="submission.code"
         show-line-numbers
       />