fix types.

src/learn/index.vue

@@ -1,5 +1,9 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Md from "./step-1/index.md"
+</script>
 
-<template>learn</template>
+<template>
+  <Md />
+</template>
 
 <style scoped></style>

src/learn/step-1/index.md

@@ -0,0 +1 @@
+ceshi

src/oj/index.vue

@@ -9,7 +9,9 @@ import Header from "../shared/layout/header.vue"
     <el-header class="header">
       <Header />
     </el-header>
-    <el-main><router-view></router-view></el-main>
+    <el-main>
+      <router-view></router-view>
+    </el-main>
     <Login />
     <Signup />
   </el-container>

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>

src/utils/types.ts

@@ -52,6 +52,11 @@ export interface Problem {
   my_status: number
 }
 
+export interface Code {
+  language: LANGUAGE
+  value: string
+}
+
 export interface SubmitCodePayload {
   problem_id: number
   language: LANGUAGE

src/vite-env.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="vite/client" />
 declare module "element-plus/dist/locale/zh-cn.mjs"
+declare module "*.md"

tsconfig.json

@@ -13,6 +13,6 @@
     "skipLibCheck": true,
     "noEmit": true
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "*.d.ts"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

vite.config.ts

@@ -21,12 +21,14 @@ export default defineConfig({
     AutoImport({
       imports: ["vue", "vue-router", "@vueuse/core", "pinia"],
       resolvers: [ElementPlusResolver(), IconsResolver()],
+      dts: "./src/auto-imports.d.ts",
     }),
     Components({
       resolvers: [
         ElementPlusResolver(),
         IconsResolver({ enabledCollections: ["ep"] }),
       ],
+      dts: "./src/components.d.ts",
     }),
     Icons({ autoInstall: true }),
     Markdown(),