fix types.

src/oj/problem/components/editor-exec.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { TabsPaneContext } from "element-plus"
+import { Ref } from "vue"
 import { Problem } from "../../../utils/types"
 import { submissionExists } from "../../api"
 import SubmitPanel from "./submit-panel.vue"
+import TestcasePanel from "./testcase-panel.vue"
 
 const tab = ref("testcase")
 const submitPanelRef = ref<{ submit: Function }>()
-const problem = inject("problem") as Problem
-const id = ref(problem.id)
+const problem = inject<Ref<Problem>>("problem")
 const [tried] = useToggle()
 
 onMounted(() => {
@@ -15,7 +16,7 @@ onMounted(() => {
 })
 
 async function checkIfTried() {
-  const res = await submissionExists(id.value)
+  const res = await submissionExists(problem!.value.id)
   tried.value = res.data
 }
 
@@ -28,11 +29,7 @@ function onTab(pane: TabsPaneContext) {
 
 <template>
   <el-tabs type="border-card" @tab-click="onTab" v-model="tab">
-    <el-tab-pane label="测试用例" name="testcase">
-      <div class="panel">
-        <el-table height="320"></el-table>
-      </div>
-    </el-tab-pane>
+    <TestcasePanel />
     <SubmitPanel ref="submitPanelRef" />
   </el-tabs>
 </template>

src/oj/problem/components/editor.vue

@@ -18,7 +18,7 @@ const code = reactive({
   value: SOURCES[props.problem.languages[0] || "C"],
   language: props.problem.languages[0] || "C",
 })
-provide("code", code)
+provide("code", readonly(code))
 
 const monacoEditorRef = ref()
 
@@ -32,18 +32,15 @@ onBeforeUnmount(() => {
   monaco.editor.getModels().forEach((model) => model.dispose())
 })
 
-watch(
-  () => code.language,
-  () => {
-    if (monaco && monaco.editor) {
-      monaco.editor.setModelLanguage(
-        monaco.editor.getModels()[0],
-        LANGUAGE_VALUE[code.language]
-      )
-      reset()
-    }
+watchEffect(() => {
+  if (monaco && monaco.editor) {
+    monaco.editor.setModelLanguage(
+      monaco.editor.getModels()[0],
+      LANGUAGE_VALUE[code.language]
+    )
+    reset()
   }
-)
+})
 
 function reset() {
   code.value = props.problem.template[code.language] || SOURCES[code.language]

src/oj/problem/components/submit-panel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import party from "party-js"
+import { Ref } from "vue"
 import {
   SOURCES,
   JUDGE_STATUS,
@@ -10,7 +11,7 @@ import {
   submissionTimeFormat,
 } from "../../../utils/functions"
 import {
-  LANGUAGE,
+  Code,
   Problem,
   Submission,
   SubmitCodePayload,
@@ -19,13 +20,11 @@ import { getSubmission, submitCode } from "../../api"
 
 import SubmissionResultTag from "../../components/submission-result-tag.vue"
 
-const code = inject<{ value: string; language: LANGUAGE }>("code", {
+const code = inject<Code>("code", {
   value: "",
   language: "C",
 })
-const problem = inject("problem") as Problem
-const template = ref(problem.template)
-const id = ref(problem.id)
+const problem = inject<Ref<Problem>>("problem")
 
 const route = useRoute()
 const contestID = <string>route.params.contestID || ""
@@ -80,7 +79,7 @@ const submitDisabled = computed(() => {
   const value = code.value
   if (
     value.trim() === "" ||
-    value === template.value[code.language] ||
+    value === problem!.value.template[code.language] ||
     value === SOURCES[code.language]
   ) {
     return true
@@ -152,7 +151,7 @@ const infoTable = computed(() => {
 
 async function submit() {
   const data: SubmitCodePayload = {
-    problem_id: id.value,
+    problem_id: problem!.value.id,
     language: code.language,
     code: code.value,
   }

src/oj/problem/components/testcase-panel.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Ref } from "vue"
+import { Code, Problem } from "../../../utils/types"
+
+const problem = inject<Ref<Problem>>("problem")
+const code = inject<Code>("code")
+</script>
+
+<template>
+  <el-tab-pane label="测试用例" name="testcase">
+    <div class="panel">
+      <el-table height="320"></el-table>
+    </div>
+  </el-tab-pane>
+</template>
+
+<style scoped></style>