add create a problem.

src/admin/problem/detail.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
-import { SelectOption } from "naive-ui"
-import { getProblemTagList } from "~/shared/api"
 import TextEditor from "~/shared/TextEditor.vue"
+import Monaco from "~/shared/Monaco.vue"
+
+import { SelectOption } from "naive-ui"
 import { unique } from "~/utils/functions"
 import { Problem, Tag } from "~/utils/types"
+import { getProblemTagList } from "~/shared/api"
+import { LANGUAGE_SHOW_VALUE } from "~/utils/constants"
+import { cTemplate, cppTemplate, blankTemplate } from "./templates"
 
 interface AlterProblem {
   spj_language: string
@@ -39,7 +43,7 @@ const problem = reactive<Omit<Problem, ExcludeKeys> & AlterProblem>({
   visible: true,
   share_submission: false,
   tags: [],
-  languages: ["C", "C++", "Python3"],
+  languages: ["C", "Python3"],
   template: {},
   samples: [{ input: "", output: "" }],
   spj: false,
@@ -58,9 +62,12 @@ const problem = reactive<Omit<Problem, ExcludeKeys> & AlterProblem>({
   },
 })
 
+const template = shallowRef({})
+
 const existingTags = shallowRef<Tag[]>([])
 const fromExistingTags = shallowRef<string[]>([])
 const newTags = shallowRef<string[]>([])
+const [needTemplate] = useToggle(false)
 
 const difficultyOptions: SelectOption[] = [
   { label: "简单", value: "Low" },
@@ -69,12 +76,12 @@ const difficultyOptions: SelectOption[] = [
 ]
 
 const languageOptions = [
-  { label: "C", value: "C" },
-  { label: "C++", value: "C++" },
-  { label: "Python", value: "Python3" },
-  { label: "Java", value: "Java" },
-  { label: "JS", value: "JavaScript" },
-  { label: "Go", value: "Golang" },
+  { label: LANGUAGE_SHOW_VALUE["C"], value: "C" },
+  { label: LANGUAGE_SHOW_VALUE["Python3"], value: "Python3" },
+  { label: LANGUAGE_SHOW_VALUE["C++"], value: "C++" },
+  { label: LANGUAGE_SHOW_VALUE["Java"], value: "Java" },
+  { label: LANGUAGE_SHOW_VALUE["JavaScript"], value: "JavaScript" },
+  { label: LANGUAGE_SHOW_VALUE["Golang"], value: "Golang" },
 ]
 
 const tagOptions = computed(() =>
@@ -118,6 +125,11 @@ watch([fromExistingTags, newTags], (tags) => {
   const uniqueTags = unique<string>(tags[0].concat(tags[1]))
   problem.tags = uniqueTags
 })
+
+watch(
+  () => problem.languages,
+  () => {}
+)
 </script>
 
 <template>
@@ -202,6 +214,35 @@ watch([fromExistingTags, newTags], (tags) => {
     添加用例
   </n-button>
   <TextEditor v-model:value="problem.hint" title="提示" />
+  <n-space class="title">
+    <n-checkbox v-model:checked="needTemplate" label="代码模板" />
+  </n-space>
+  <n-tabs type="segment" v-if="needTemplate">
+    <n-tab-pane
+      v-for="(lang, index) in problem.languages"
+      :name="LANGUAGE_SHOW_VALUE[lang]"
+      :key="index"
+    >
+      <Monaco
+        v-if="lang === 'C'"
+        v-model:value="cTemplate"
+        :font-size="12"
+        height="320px"
+      />
+      <Monaco
+        v-else-if="lang === 'C++'"
+        v-model:value="cppTemplate"
+        :font-size="12"
+        height="320px"
+      />
+      <Monaco
+        v-else
+        v-model:value="blankTemplate"
+        :font-size="12"
+        height="320px"
+      />
+    </n-tab-pane>
+  </n-tabs>
   <n-form>
     <n-form-item label="题目的来源">
       <n-input

src/admin/problem/templates.ts

@@ -0,0 +1,44 @@
+export const cTemplate = `//PREPEND BEGIN
+#include <stdio.h>
+//PREPEND END
+
+//TEMPLATE BEGIN
+int add(int a, int b) {
+  // 请填空
+  return ___________;
+}
+//TEMPLATE END
+
+//APPEND BEGIN
+int main() {
+  printf("%d", add(1, 2));
+  return 0;
+}
+//APPEND END`
+
+export const cppTemplate = `//PREPEND BEGIN
+#include <iostream>
+//PREPEND END
+
+//TEMPLATE BEGIN
+int add(int a, int b) {
+  // 请填空
+  return ___________;
+}
+//TEMPLATE END
+
+//APPEND BEGIN
+int main() {
+  std::cout << add(1, 2);
+  return 0;
+}
+//APPEND END`
+
+export const blankTemplate = `//PREPEND BEGIN
+//PREPEND END
+
+//TEMPLATE BEGIN
+//TEMPLATE END
+
+//APPEND BEGIN
+//APPEND END`

src/components.d.ts

@@ -56,7 +56,6 @@ declare module '@vue/runtime-core' {
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']
-    NTextarea: typeof import('naive-ui')['NTextarea']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NUpload: typeof import('naive-ui')['NUpload']
     RouterLink: typeof import('vue-router')['RouterLink']

src/learn/index.vue

@@ -32,9 +32,6 @@ watch(
   { immediate: true }
 )
 
-function change(v: string) {
-  code.value = v
-}
 function prev() {
   router.push(`/learn/step-${step.value - 1}`)
 }
@@ -59,7 +56,7 @@ function next() {
       </n-scrollbar>
     </n-gi>
     <n-gi :span="14">
-      <Monaco :value="code" @change="change" />
+      <Monaco v-model:value="code" />
     </n-gi>
   </n-grid>
   <div v-else>
@@ -74,7 +71,7 @@ function next() {
         </n-button>
       </n-space>
     </n-scrollbar>
-    <Monaco :value="code" @change="change" height="calc(50vh - 42px)" />
+    <Monaco v-model:value="code" height="calc(50vh - 42px)" />
   </div>
 </template>
 

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
       />

src/shared/Monaco.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type * as Monaco from "monaco-editor"
-import { LANGUAGE_VALUE } from "utils/constants"
+import { LANGUAGE_FORMAT_VALUE } from "utils/constants"
 import { LANGUAGE } from "utils/types"
 import { isMobile } from "~/shared/composables/breakpoints"
 import { isDark } from "./composables/dark"
@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  (e: "change", value: string): void
+  (e: "update:value", value: string): void
 }>()
 
 const monacoEditorRef = ref()
@@ -33,7 +33,7 @@ onMounted(async () => {
   if (!monaco.value) await init()
   model = monaco.value!.editor.createModel(
     props.value,
-    LANGUAGE_VALUE[props.language]
+    LANGUAGE_FORMAT_VALUE[props.language]
   )
 
   editor = monaco.value!.editor.create(monacoEditorRef.value, {
@@ -45,7 +45,7 @@ onMounted(async () => {
     lineNumbersMinChars: 2,
     automaticLayout: true, // 自适应布局
     tabSize: 4,
-    fontSize: isMobile.value ? 20 : 22, // 字体大小
+    fontSize: props.fontSize || (isMobile.value ? 20 : 22), // 字体大小
     scrollBeyondLastLine: false,
     lineDecorationsWidth: 0,
     scrollBeyondLastColumn: 0,
@@ -60,7 +60,7 @@ onMounted(async () => {
 
   model.onDidChangeContent(() => {
     const value = model.getValue().toString()
-    emit("change", value)
+    emit("update:value", value)
   })
 
   editor.onKeyDown((e) => {
@@ -74,7 +74,10 @@ onMounted(async () => {
 
   watchEffect(() => {
     if (!monaco.value) return
-    monaco.value.editor.setModelLanguage(model, LANGUAGE_VALUE[props.language])
+    monaco.value.editor.setModelLanguage(
+      model,
+      LANGUAGE_FORMAT_VALUE[props.language]
+    )
   })
 
   watchEffect(() => {

src/utils/constants.ts

@@ -212,7 +212,7 @@ export const DEAD_RESULTS = {
   },
 }
 
-export const LANGUAGE_VALUE = {
+export const LANGUAGE_FORMAT_VALUE = {
   C: "c",
   "C++": "cpp",
   Java: "java",
@@ -221,3 +221,13 @@ export const LANGUAGE_VALUE = {
   JavaScript: "javascript",
   Golang: "go",
 }
+
+export const LANGUAGE_SHOW_VALUE = {
+  C: "C",
+  "C++": "C++",
+  Java: "Java",
+  Python2: "Python",
+  Python3: "Python",
+  JavaScript: "JS",
+  Golang: "Go",
+}

vite.config.ts

@@ -23,6 +23,7 @@ export default defineConfig({
         manualChunks: {
           fancy: ["highlight.js", "party-js"],
           chart: ["vue-chartjs", "chart.js"],
+          editor: ["@wangeditor/editor"],
         },
       },
     },