From 16986267045b41ad954fb44b90fbf5bae5da737f Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 27 Mar 2023 20:27:30 +0800
Subject: [PATCH] add create a problem.

---
 src/admin/problem/detail.vue         | 59 +++++++++++++++++++++++-----
 src/admin/problem/templates.ts       | 44 +++++++++++++++++++++
 src/components.d.ts                  |  1 -
 src/learn/index.vue                  |  7 +---
 src/oj/problem/components/Editor.vue |  7 +---
 src/oj/problem/components/Form.vue   |  4 +-
 src/oj/submission/detail.vue         |  4 +-
 src/shared/Monaco.vue                | 15 ++++---
 src/utils/constants.ts               | 12 +++++-
 vite.config.ts                       |  1 +
 10 files changed, 122 insertions(+), 32 deletions(-)
 create mode 100644 src/admin/problem/templates.ts

diff --git a/src/admin/problem/detail.vue b/src/admin/problem/detail.vue
index 6c82929..4f0202d 100644
--- a/src/admin/problem/detail.vue
+++ b/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
diff --git a/src/admin/problem/templates.ts b/src/admin/problem/templates.ts
new file mode 100644
index 0000000..76a1e3d
--- /dev/null
+++ b/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`
diff --git a/src/components.d.ts b/src/components.d.ts
index 6a996ad..3b35dbf 100644
--- a/src/components.d.ts
+++ b/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']
diff --git a/src/learn/index.vue b/src/learn/index.vue
index 56ba46a..feed0c0 100644
--- a/src/learn/index.vue
+++ b/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>
 
diff --git a/src/oj/problem/components/Editor.vue b/src/oj/problem/components/Editor.vue
index 2656c7a..df36316 100644
--- a/src/oj/problem/components/Editor.vue
+++ b/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>
diff --git a/src/oj/problem/components/Form.vue b/src/oj/problem/components/Form.vue
index aff551d..06b491c 100644
--- a/src/oj/problem/components/Form.vue
+++ b/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,
 }))
diff --git a/src/oj/submission/detail.vue b/src/oj/submission/detail.vue
index 635c871..40aeb60 100644
--- a/src/oj/submission/detail.vue
+++ b/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
       />
diff --git a/src/shared/Monaco.vue b/src/shared/Monaco.vue
index 144c0e0..eadd6b7 100644
--- a/src/shared/Monaco.vue
+++ b/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(() => {
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 1fa5114..cc8c937 100644
--- a/src/utils/constants.ts
+++ b/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",
+}
diff --git a/vite.config.ts b/vite.config.ts
index 4fc1225..d63cba8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -23,6 +23,7 @@ export default defineConfig({
         manualChunks: {
           fancy: ["highlight.js", "party-js"],
           chart: ["vue-chartjs", "chart.js"],
+          editor: ["@wangeditor/editor"],
         },
       },
     },