add editor.

src/oj/problem/detail.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue"
 import { useRoute } from "vue-router"
-import Editor from "./editor.vue"
+import Editor from "./components/editor.vue"
 import { getProblem } from "../api"
-import ProblemContent from "./problem-content.vue"
-import ProblemInfo from "./problem-info.vue"
+import ProblemContent from "./components/problem-content.vue"
+import ProblemInfo from "./components/problem-info.vue"
 
 const route = useRoute()
-const code = ref("print('hello world')")
-const language = ref("C")
+const contestID = route.params.contestID as string
+const problemID = route.params.problemID as string
+
 const problem = ref({
+  _id: 0,
   created_by: {},
   io_mode: {},
   languages: [],
@@ -20,8 +22,7 @@ const problem = ref({
 })
 
 async function init() {
-  const id = route.params.id as string
-  const res = await getProblem(id)
+  const res = await getProblem(problemID)
   problem.value = res.data
 }
 
@@ -31,21 +32,21 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-row>
+  <el-row v-if="problem._id">
     <el-col :span="14">
       <el-tabs type="border-card">
         <el-tab-pane label="题目描述">
           <ProblemContent :problem="problem" />
         </el-tab-pane>
-        <el-tab-pane label="比赛信息"></el-tab-pane>
+        <el-tab-pane label="比赛信息" v-if="contestID"></el-tab-pane>
         <el-tab-pane label="题目信息">
           <ProblemInfo :problem="problem" />
         </el-tab-pane>
-        <el-tab-pane label="提交信息">3</el-tab-pane>
+        <el-tab-pane label="提交情况">3</el-tab-pane>
       </el-tabs>
     </el-col>
     <el-col :span="10">
-      <Editor :value="code" :language="language" />
+      <Editor :languages="problem.languages" :template="problem.template" />
     </el-col>
   </el-row>
 </template>