fix.

2023-01-07 13:33:51 +08:00
parent c3746ad105
commit b9c6b404d3
6 changed files with 160 additions and 181 deletions
--- a/src/oj/problem/components/editor.vue
+++ b/src/oj/problem/components/editor.vue
@@ -1,25 +1,23 @@
 <script lang="ts" setup>
 import loader, { Monaco } from "@monaco-editor/loader"
 import { ref, onBeforeUnmount, onMounted, watch, reactive } from "vue"
-import { onBeforeRouteLeave, useRoute } from "vue-router"
 import {
-  buildProblemCodeKey,
  LANGUAGE,
-  languageLabel,
-  languageValue,
+  LANGUAGE_LABEL,
+  LANGUAGE_VALUE,
+  SOURCES,
 } from "../../../utils/constants"
-import storage from "../../../utils/storage"

-const route = useRoute()
-const { languages, template } = defineProps<{
-  languages: Array<LANGUAGE>
-  template: { [key in LANGUAGE]?: string }
+const { problem } = defineProps<{
+  problem: {
+    languages: Array<LANGUAGE>
+    template: { [key in LANGUAGE]?: string }
+  }
 }>()

 const state = reactive({
-  value: "",
-  language: languages[0] || "C",
-  theme: "vs",
+  values: ref({ ...SOURCES }),
+  language: problem.languages[0] || "C",
 })

 const monacoEditorRef = ref()
@@ -27,78 +25,52 @@ const monacoEditorRef = ref()
 let monaco: Monaco

 function reset() {
+  state.values[state.language] =
+    problem.template[state.language] || SOURCES[state.language]
  if (monaco && monaco.editor) {
-    monaco.editor.getModels()[0].setValue(template[state.language] || "")
+    monaco.editor.getModels()[0].setValue(state.values[state.language])
  }
 }

 onMounted(() => {
-  initValue()
-  initEditor()
+  init()
 })

 onBeforeUnmount(() => {
  monaco.editor.getModels().forEach((model) => model.dispose())
 })

-onBeforeRouteLeave(() => {
-  const key = buildProblemCodeKey(
-    route.params.problemID as string,
-    route.params.contestID as string
-  )
-  storage.set(key, {
-    code: state.value,
-    language: state.language,
-    theme: state.theme,
-  })
-})
-
 watch(
  () => state.language,
  () => {
    if (monaco && monaco.editor) {
      monaco.editor.setModelLanguage(
        monaco.editor.getModels()[0],
-        languageValue[state.language]
+        LANGUAGE_VALUE[state.language]
      )
+      reset()
    }
  }
 )

-function initValue() {
-  const key = buildProblemCodeKey(
-    route.params.problemID as string,
-    route.params.contestID as string
-  )
-  const problemCode = storage.get(key)
-  if (problemCode) {
-    state.value = problemCode.code
-    state.language = problemCode.language
-    state.theme = problemCode.theme
-  }
-  if (!state.value && template[state.language]) {
-    state.value = template[state.language] || ""
-  }
-}
+async function init() {
+  state.values[state.language] =
+    problem.template[state.language] || SOURCES[state.language]

-async function initEditor() {
  monaco = await loader.init()
  monaco.editor.create(monacoEditorRef.value, {
-    value: state.value, // 编辑器初始显示文字
-    language: languageValue[state.language],
+    value: state.values[state.language], // 编辑器初始显示文字
+    language: LANGUAGE_VALUE[state.language],
    automaticLayout: true, // 自适应布局
-    theme: state.theme, // 官方自带三种主题vs, hc-black, or vs-dark
+    theme: "vs", // 官方自带三种主题vs, hc-black, or vs-dark
    minimap: {
      enabled: false,
    },
    fontSize: 24, // 字体大小
    scrollBeyondLastLine: false, // 取消代码后面一大段空白
-    overviewRulerBorder: false, // 不要滚动条的边框
  })
-  // 监听值的变化
  monaco.editor.getModels()[0].onDidChangeContent(() => {
-    console.log(1)
-    state.value = monaco.editor.getModels()[0].getValue()
+    state.values[state.language] = monaco.editor.getModels()[0].getValue()
  })
 }
 </script>
@@ -108,10 +80,10 @@ async function initEditor() {
    <el-form-item label="语言" label-width="60">
      <el-select v-model="state.language" class="language">
        <el-option
-          v-for="item in languages"
+          v-for="item in problem.languages"
          :key="item"
          :value="item"
-          :label="languageLabel[item]"
+          :label="LANGUAGE_LABEL[item]"
        >
        </el-option>
      </el-select>
@@ -139,7 +111,7 @@ async function initEditor() {
 }

 .editor {
-  height: 500px;
+  height: 70%;
 }
 .actions {
  margin-top: 16px;
--- a/src/oj/problem/detail.vue
+++ b/src/oj/problem/detail.vue
@@ -11,7 +11,7 @@ const contestID = route.params.contestID as string
 const problemID = route.params.problemID as string

 const problem = ref({
-  _id: 0,
+  _id: "",
  created_by: {},
  io_mode: {},
  languages: [],
@@ -33,7 +33,7 @@ onMounted(() => {

 <template>
  <el-row v-if="problem._id">
-    <el-col :span="14">
+    <el-col :span="12">
      <el-tabs type="border-card">
        <el-tab-pane label="题目描述">
          <ProblemContent :problem="problem" />
@@ -45,8 +45,8 @@ onMounted(() => {
        <el-tab-pane label="提交情况">3</el-tab-pane>
      </el-tabs>
    </el-col>
-    <el-col :span="10">
-      <Editor :languages="problem.languages" :template="problem.template" />
+    <el-col :span="12">
+      <Editor :problem="problem" />
    </el-col>
  </el-row>
 </template>
--- a/src/utils/code-templates.ts
+++ b/src/utils/code-templates.ts
@@ -1,55 +0,0 @@
-export const cSource =
-  '#include<stdio.h>\r\n\r\nint main()\r\n{\r\n    printf("黄岩一职");\r\n    return 0;\r\n}'
-export const cppSource =
-  '#include<iostream>\r\n\r\nusing namespace std;\r\n\r\nint main()\r\n{\r\n    cout<<"黄岩一职"<<endl;\r\n    return 0;\r\n}'
-export const pythonSource = 'print("黄岩一职")'
-export const javaSource =
-  'public class Main {\r\n    public static void main(String[] args) {\r\n        System.out.println("黄岩一职");\r\n    }\r\n}'
-
-export const sources = {
-  50: cSource,
-  54: cppSource,
-  62: javaSource,
-  71: pythonSource,
-}
-
-export const language = {
-  50: "c",
-  54: "cpp",
-  62: "java",
-  71: "python",
-}
-
-export const deadResults = {
-  50: {
-    encoded:
-      "I2luY2x1ZGU8c3RkaW8uaD4NCg0KaW50IG1haW4oKQ0Kew0KICAgIHByaW50Zigi6buE5bKp5LiA6IGMIik7DQogICAgcmV0dXJuIDA7DQp9",
-    result: {
-      status: 3,
-      output: "黄岩一职",
-    },
-  },
-  54: {
-    encoded:
-      "I2luY2x1ZGU8aW9zdHJlYW0+DQoNCnVzaW5nIG5hbWVzcGFjZSBzdGQ7DQoNCmludCBtYWluKCkNCnsNCiAgICBjb3V0PDwi6buE5bKp5LiA6IGMIjw8ZW5kbDsNCiAgICByZXR1cm4gMDsNCn0=",
-    result: {
-      status: 3,
-      output: "黄岩一职",
-    },
-  },
-  71: {
-    encoded: "cHJpbnQoIum7hOWyqeS4gOiBjCIp",
-    result: {
-      status: 3,
-      output: "黄岩一职",
-    },
-  },
-  62: {
-    encoded:
-      "cHVibGljIGNsYXNzIE1haW4gew0KICAgIHB1YmxpYyBzdGF0aWMgdm9pZCBtYWluKFN0cmluZ1tdIGFyZ3MpIHsNCiAgICAgICAgU3lzdGVtLm91dC5wcmludGxuKCLpu4TlsqnkuIDogYwiKTsNCiAgICB9DQp9",
-    result: {
-      status: 3,
-      output: "黄岩一职",
-    },
-  },
-}
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -143,7 +143,69 @@ export function buildProblemCodeKey(problemID: string, contestID = "") {
  return `${STORAGE_KEY.PROBLEM_CODE}_NaN_${problemID}`
 }

-export const languageLabel = {
+const cSource =
+  '#include<stdio.h>\r\n\r\nint main()\r\n{\r\n    printf("黄岩一职");\r\n    return 0;\r\n}'
+const cppSource =
+  '#include<iostream>\r\n\r\nusing namespace std;\r\n\r\nint main()\r\n{\r\n    cout<<"黄岩一职"<<endl;\r\n    return 0;\r\n}'
+const pythonSource = 'print("黄岩一职")'
+const javaSource =
+  'public class Main {\r\n    public static void main(String[] args) {\r\n        System.out.println("黄岩一职");\r\n    }\r\n}'
+
+export const SOURCES = {
+  C: cSource,
+  "C++": cppSource,
+  Java: javaSource,
+  Python3: pythonSource,
+  Python2: "",
+  JavaScript: "",
+  Golang: "",
+}
+
+export const LANGUAGE_ID = {
+  C: 50,
+  "C++": 54,
+  Java: 62,
+  Python3: 71,
+  Python2: 0,
+  JavaScript: 0,
+  Golang: 0,
+}
+
+export const DEAD_RESULTS = {
+  C: {
+    encoded:
+      "I2luY2x1ZGU8c3RkaW8uaD4NCg0KaW50IG1haW4oKQ0Kew0KICAgIHByaW50Zigi6buE5bKp5LiA6IGMIik7DQogICAgcmV0dXJuIDA7DQp9",
+    result: {
+      status: 3,
+      output: "黄岩一职",
+    },
+  },
+  "C++": {
+    encoded:
+      "I2luY2x1ZGU8aW9zdHJlYW0+DQoNCnVzaW5nIG5hbWVzcGFjZSBzdGQ7DQoNCmludCBtYWluKCkNCnsNCiAgICBjb3V0PDwi6buE5bKp5LiA6IGMIjw8ZW5kbDsNCiAgICByZXR1cm4gMDsNCn0=",
+    result: {
+      status: 3,
+      output: "黄岩一职",
+    },
+  },
+  Java: {
+    encoded:
+      "cHVibGljIGNsYXNzIE1haW4gew0KICAgIHB1YmxpYyBzdGF0aWMgdm9pZCBtYWluKFN0cmluZ1tdIGFyZ3MpIHsNCiAgICAgICAgU3lzdGVtLm91dC5wcmludGxuKCLpu4TlsqnkuIDogYwiKTsNCiAgICB9DQp9",
+    result: {
+      status: 3,
+      output: "黄岩一职",
+    },
+  },
+  Python3: {
+    encoded: "cHJpbnQoIum7hOWyqeS4gOiBjCIp",
+    result: {
+      status: 3,
+      output: "黄岩一职",
+    },
+  },
+}
+
+export const LANGUAGE_LABEL = {
  C: "C",
  "C++": "C++",
  Java: "Java",
@@ -153,9 +215,9 @@ export const languageLabel = {
  Golang: "Go",
 }

-export type LANGUAGE = keyof typeof languageLabel
+export type LANGUAGE = keyof typeof LANGUAGE_LABEL

-export const languageValue = {
+export const LANGUAGE_VALUE = {
  C: "c",
  "C++": "cpp",
  Java: "java",