template for the problem.

src/admin/problem/detail.vue

@@ -3,11 +3,10 @@ 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 { encode, unique } from "~/utils/functions"
+import { LANGUAGE, Problem, Tag } from "~/utils/types"
 import { getProblemTagList } from "~/shared/api"
-import { LANGUAGE_SHOW_VALUE } from "~/utils/constants"
-import { cTemplate, cppTemplate, blankTemplate } from "./templates"
+import { LANGUAGE_SHOW_VALUE, CODE_TEMPLATES } from "~/utils/constants"
 
 interface AlterProblem {
   spj_language: string
@@ -62,7 +61,7 @@ const problem = reactive<Omit<Problem, ExcludeKeys> & AlterProblem>({
   },
 })
 
-const template = shallowRef({})
+const template = reactive(JSON.parse(JSON.stringify(CODE_TEMPLATES)))
 
 const existingTags = shallowRef<Tag[]>([])
 const fromExistingTags = shallowRef<string[]>([])
@@ -117,6 +116,25 @@ function removeSample(index: number) {
   problem.samples.splice(index, 1)
 }
 
+function resetTemplate(language: LANGUAGE) {
+  template[language] = CODE_TEMPLATES[language]
+}
+
+function saveProblem() {
+  if (!needTemplate.value) {
+    problem.template = {}
+  } else {
+    problem.languages.forEach((lang) => {
+      if (CODE_TEMPLATES[lang] !== template[lang]) {
+        problem.template[lang] = template[lang]
+      } else {
+        delete problem.template[lang]
+      }
+    })
+  }
+  console.log(problem.template)
+}
+
 onMounted(() => {
   listTags()
 })
@@ -125,13 +143,6 @@ watch([fromExistingTags, newTags], (tags) => {
   const uniqueTags = unique<string>(tags[0].concat(tags[1]))
   problem.tags = uniqueTags
 })
-
-watch(
-  () => problem.languages,
-  () => {
-    console.log(111)
-  }
-)
 </script>
 
 <template>
@@ -216,33 +227,29 @@ watch(
     添加用例
   </n-button>
   <TextEditor v-model:value="problem.hint" title="提示" />
-  <n-space class="title">
+  <n-space class="title" align="center">
     <n-checkbox v-model:checked="needTemplate" label="代码模板" />
   </n-space>
-  <n-tabs type="segment" v-if="needTemplate">
+  <n-tabs type="segment" class="templateWrapper" 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"
+        v-model:value="template[lang]"
+        :language="lang"
+        :font-size="16"
+        height="300px"
       />
+      <n-button
+        size="small"
+        secondary
+        type="warning"
+        @click="resetTemplate(lang)"
+      >
+        重置 {{ LANGUAGE_SHOW_VALUE[lang] }} 代码模板
+      </n-button>
     </n-tab-pane>
   </n-tabs>
   <n-form>
@@ -253,6 +260,9 @@ watch(
       />
     </n-form-item>
   </n-form>
+  <n-space justify="end">
+    <n-button type="primary" @click="saveProblem">保存</n-button>
+  </n-space>
 </template>
 
 <style scoped>
@@ -281,4 +291,9 @@ watch(
   width: 100%;
   margin-bottom: 20px;
 }
+
+.templateWrapper {
+  width: 50%;
+  margin-bottom: 20px;
+}
 </style>