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,
 }))