add testcase panel.

src/oj/problem/components/Editor.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { LANGUAGE_LABEL, SOURCES } from "../../../utils/constants"
 import { Problem } from "../../../utils/types"
-import { useCodeStore } from "../../stores/code"
+import { useCodeStore } from "../../store/code"
 import { submissionExists } from "../../api"
 import { TabsPaneContext } from "element-plus"
 
-import Monaco from "../../../shared/monaco/index.vue"
+import Monaco from "../../../shared/Monaco/index.vue"
 import SubmitPanel from "./SubmitPanel.vue"
 import TestcasePanel from "./TestcasePanel.vue"
 

src/oj/problem/components/ProblemContent.vue

@@ -1,18 +1,32 @@
 <script setup lang="ts">
 import { Problem } from "../../../utils/types"
-import { Flag } from "@element-plus/icons-vue"
+import { Flag, CloseBold, Select } from "@element-plus/icons-vue"
-import { useTestcaseReultStore } from "../../stores/testcaseResult"
+import { useCodeStore } from "../../store/code"
-import { useCodeStore } from "../../stores/code"
 import { SOURCES } from "../../../utils/constants"
+import { createTestSubmission } from "../../../utils/judge"
 
 interface Props {
   problem: Problem
 }
+type Sample = Problem["samples"][number] & {
+  id: number
+  msg: string
+  status: "passed" | "failed" | "not_test"
+  loading: boolean
+}
 
 const props = defineProps<Props>()
 
+const samples = ref<Sample[]>(
+  props.problem.samples.map((sample, index) => ({
+    ...sample,
+    id: index,
+    msg: "",
+    status: "not_test",
+    loading: false,
+  }))
+)
 const { code } = useCodeStore()
-const testcaseResultStore = useTestcaseReultStore()
 
 const disabled = computed(
   () =>
@@ -22,10 +36,44 @@ const disabled = computed(
       code.value === SOURCES[code.language]
     )
 )
-
+async function test(sample: Sample, index: number) {
-function test(input: string) {
+  samples.value = samples.value.map((sample) => {
-  testcaseResultStore.runTestcase(code, input)
+    if (sample.id === index) {
+      sample.loading = true
+    }
+    return sample
+  })
+  const res = await createTestSubmission(code, sample.input)
+  samples.value = samples.value.map((sample) => {
+    if (sample.id === index) {
+      const status =
+        res.status === 3 && res.output.trim() === sample.output
+          ? "passed"
+          : "failed"
+      return {
+        ...sample,
+        msg: res.output,
+        status: status,
+        loading: false,
+      }
+    } else {
+      return sample
+    }
+  })
 }
+
+const icon = (status: Sample["status"]) =>
+  ({
+    not_test: Flag,
+    failed: CloseBold,
+    passed: Select,
+  }[status])
+const type = (status: Sample["status"]) =>
+  ({
+    not_test: "warning",
+    failed: "danger",
+    passed: "success",
+  }[status])
 </script>
 
 <template>
@@ -46,24 +94,28 @@ function test(input: string) {
     </el-card>
   </div>
 
-  <div v-for="(sample, index) of problem.samples" :key="index">
+  <div v-for="(sample, index) of samples" :key="index">
     <el-space>
       <p class="title testcaseTitle">测试用例 {{ index + 1 }}</p>
       <el-button
-        :icon="Flag"
+        :icon="icon(sample.status)"
-        type="success"
+        :type="type(sample.status)"
         :disabled="disabled"
+        :loading="sample.loading"
         circle
-        @click="test(sample.input)"
+        @click="test(sample, index)"
       ></el-button>
     </el-space>
-    <el-descriptions border direction="vertical">
+    <el-descriptions border direction="vertical" :column="2">
       <el-descriptions-item width="50%" label="输入">
         <div class="testcase">{{ sample.input }}</div>
       </el-descriptions-item>
       <el-descriptions-item width="50%" label="输出">
         <div class="testcase">{{ sample.output }}</div>
       </el-descriptions-item>
+      <el-descriptions-item label="运行结果" v-if="sample.status === 'failed'">
+        <div class="testcase">{{ sample.msg }}</div>
+      </el-descriptions-item>
     </el-descriptions>
   </div>
 

src/oj/problem/components/SubmitPanel.vue

@@ -14,7 +14,7 @@ import { Problem, Submission, SubmitCodePayload } from "../../../utils/types"
 import { getSubmission, submitCode } from "../../api"
 
 import SubmissionResultTag from "../../components/SubmissionResultTag.vue"
-import { useCodeStore } from "../../stores/code"
+import { useCodeStore } from "../../store/code"
 
 const problem = inject<Ref<Problem>>("problem")
 const { code } = useCodeStore()
@@ -103,22 +103,22 @@ const submitLabel = computed(() => {
 })
 
 const msg = computed(() => {
-  if (
+  let msg = ""
-    submission.value &&
-    submission.value.statistic_info &&
-    submission.value.statistic_info.err_info
-  ) {
-    return submission.value.statistic_info.err_info
-  }
   const result = submission.value && submission.value.result
   if (
     result === SubmissionStatus.compile_error ||
     result === SubmissionStatus.runtime_error
   ) {
-    return "请仔细检查，看看代码格式是不是写错了！"
+    msg += "请仔细检查，看看代码的格式是不是写错了！\n\n"
-  } else {
-    return ""
   }
+  if (
+    submission.value &&
+    submission.value.statistic_info &&
+    submission.value.statistic_info.err_info
+  ) {
+    msg += submission.value.statistic_info.err_info
+  }
+  return msg
 })
 
 const infoTable = computed(() => {
@@ -162,7 +162,7 @@ async function submit() {
 }
 
 watch(
-  () => submission.value && submission.value.result,
+  () => submission?.value?.result,
   (result) => {
     if (result === SubmissionStatus.accepted) {
       party.confetti(document.body, {
@@ -195,36 +195,28 @@ defineExpose({ submit })
         :title="JUDGE_STATUS[submission.result]['name']"
       >
       </el-alert>
-      <el-scrollbar
+      <el-scrollbar v-if="msg" height="354" class="result" noresize>
-        v-if="msg || infoTable.length"
+        <div>{{ msg }}</div>
-        height="280"
-        class="result"
-        noresize
-      >
-        <div v-if="msg">{{ msg }}</div>
-        <el-table v-if="infoTable.length" :data="infoTable" stripe>
-          <el-table-column prop="test_case" label="测试用例" align="center" />
-          <el-table-column label="测试状态" width="120" align="center">
-            <template #default="scope">
-              <SubmissionResultTag
-                v-if="scope.row"
-                :result="scope.row.result"
-              />
-            </template>
-          </el-table-column>
-          <el-table-column label="占用内存" align="center">
-            <template #default="scope">
-              {{ submissionMemoryFormat(scope.row.memory) }}
-            </template>
-          </el-table-column>
-          <el-table-column label="执行耗时" align="center">
-            <template #default="scope">
-              {{ submissionTimeFormat(scope.row.real_time) }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="signal" label="信号" align="center" />
-        </el-table>
       </el-scrollbar>
+      <el-table v-if="infoTable.length" height="354" :data="infoTable" stripe>
+        <el-table-column prop="test_case" label="测试用例" align="center" />
+        <el-table-column label="测试状态" width="120" align="center">
+          <template #default="scope">
+            <SubmissionResultTag v-if="scope.row" :result="scope.row.result" />
+          </template>
+        </el-table-column>
+        <el-table-column label="占用内存" align="center">
+          <template #default="scope">
+            {{ submissionMemoryFormat(scope.row.memory) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="执行耗时" align="center">
+          <template #default="scope">
+            {{ submissionTimeFormat(scope.row.real_time) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="signal" label="信号" align="center" />
+      </el-table>
     </div>
   </el-tab-pane>
 </template>

src/oj/problem/components/TestcasePanel.vue

@@ -1,8 +1,32 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { createTestSubmission } from "../../../utils/judge"
+import { useCodeStore } from "../../store/code"
+
+const input = ref("")
+const result = ref("")
+const { code } = useCodeStore()
+
+async function submit() {
+  const res = await createTestSubmission(code, input.value)
+  result.value = res.output
+}
+</script>
 
 <template>
   <el-tab-pane label="测试面板" name="test">
-    <div class="panel"></div>
+    <div class="panel">
+      <el-form inline>
+        <el-form-item label="输入">
+          <el-input type="textarea" autosize v-model="input" />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="submit">运行</el-button>
+        </el-form-item>
+      </el-form>
+      <el-scrollbar height="345">
+        <div class="msg">{{ result }}</div>
+      </el-scrollbar>
+    </div>
   </el-tab-pane>
 </template>
 
@@ -10,4 +34,8 @@
 .panel {
   height: 400px;
 }
+.msg {
+  white-space: pre;
+  line-height: 1.5;
+}
 </style>

src/oj/store/code.ts

@@ -1,4 +1,4 @@
-import { Code, LANGUAGE } from "../../utils/types"
+import { Code } from "../../utils/types"
 
 export const useCodeStore = defineStore("code", () => {
   const code = reactive<Code>({

src/oj/stores/testcaseResult.ts

@@ -1,11 +0,0 @@
-import { Code } from "../../utils/types"
-
-export const useTestcaseReultStore = defineStore("testcaseResult", () => {
-  const result = ref({})
-
-  async function runTestcase(code: Code, sample: string) {
-    console.log(code, sample)
-  }
-
-  return { result, runTestcase }
-})

src/routes.ts

@@ -12,6 +12,7 @@ const routes = [
         path: "problem/:problemID",
         component: () => import("./oj/problem/detail.vue"),
         props: true,
+        name: "ProblemDetail",
       },
       {
         path: "status",
@@ -37,6 +38,7 @@ const routes = [
         path: "contest/:contestID/problem/:problemID",
         component: () => import("./oj/problem/detail.vue"),
         props: true,
+        name: "ContestProblemDetail",
       },
       {
         path: "rank",

src/shared/Header/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useLoginStore } from "../store/login"
-import { useSignupStore } from "../../oj/stores/signup"
+import { useSignupStore } from "../../oj/store/signup"
 import { useUserStore } from "../store/user"
 import { logout } from "../api"
 

src/shared/Login/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { FormInstance } from "element-plus"
-import { useSignupStore } from "../../oj/stores/signup"
+import { useSignupStore } from "../../oj/store/signup"
 import { login } from "../api"
 import { useLoginStore } from "../store/login"
 import { useUserStore } from "../store/user"

src/shared/Monaco/index.vue

@@ -46,6 +46,7 @@ onMounted(async function () {
     automaticLayout: true, // 自适应布局
     tabSize: 4,
     fontSize: isMobile.value ? 20 : 24, // 字体大小
+    scrollBeyondLastLine: false,
   })
 
   model.onDidChangeContent(() => {
@@ -68,7 +69,6 @@ onMounted(async function () {
 
   watchEffect(() => {
     if (props.value !== model.getValue()) {
-      console.log(666)
       model.setValue(props.value)
     }
   })

src/shared/Signup/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useSignupStore } from "../../oj/stores/signup"
+import { useSignupStore } from "../../oj/store/signup"
 const store = useSignupStore()
 </script>
 

src/shared/monaco/index.vue

@@ -46,6 +46,7 @@ onMounted(async function () {
     automaticLayout: true, // 自适应布局
     tabSize: 4,
     fontSize: isMobile.value ? 20 : 24, // 字体大小
+    scrollBeyondLastLine: false,
   })
 
   model.onDidChangeContent(() => {
@@ -68,7 +69,6 @@ onMounted(async function () {
 
   watchEffect(() => {
     if (props.value !== model.getValue()) {
-      console.log(666)
       model.setValue(props.value)
     }
   })

src/utils/judge.ts

@@ -41,19 +41,15 @@ export async function createTestSubmission(code: Code, input: string) {
       redirect_stderr_to_stdout: true,
       compiler_options: compilerOptions,
     }
-    try {
+    const response = await http.post("/submissions", payload, {
-      const response = await http.post("/submissions", payload, {
+      params: { base64_encoded: true, wait: true },
-        params: { base64_encoded: true, wait: true },
+    })
-      })
+    const data = response.data
-      const data = response.data
+    return {
-      return {
+      status: data.status && data.status.id,
-        status: data.status && data.status.id,
+      output: [decode(data.compile_output), decode(data.stdout)]
-        output: [decode(data.compile_output), decode(data.stdout)]
+        .join("\n")
-          .join("\n")
+        .trim(),
-          .trim(),
-      }
-    } catch (e) {
-      console.error(e)
     }
   }
 }