add testcase panel.

2023-01-13 14:26:51 +08:00
parent 31fc880c99
commit 46fcccda35
14 changed files with 146 additions and 87 deletions
--- a/src/oj/problem/components/Editor.vue
+++ b/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"

--- a/src/oj/problem/components/ProblemContent.vue
+++ b/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 { useTestcaseReultStore } from "../../stores/testcaseResult"
-import { useCodeStore } from "../../stores/code"
+import { Flag, CloseBold, Select } from "@element-plus/icons-vue"
+import { useCodeStore } from "../../store/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]
    )
 )
-
-function test(input: string) {
-  testcaseResultStore.runTestcase(code, input)
+async function test(sample: Sample, index: number) {
+  samples.value = samples.value.map((sample) => {
+    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"
-        type="success"
+        :icon="icon(sample.status)"
+        :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>

--- a/src/oj/problem/components/SubmitPanel.vue
+++ b/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 (
-    submission.value &&
-    submission.value.statistic_info &&
-    submission.value.statistic_info.err_info
-  ) {
-    return submission.value.statistic_info.err_info
-  }
+  let msg = ""
  const result = submission.value && submission.value.result
  if (
    result === SubmissionStatus.compile_error ||
    result === SubmissionStatus.runtime_error
  ) {
-    return "请仔细检查，看看代码格式是不是写错了！"
-  } else {
-    return ""
+    msg += "请仔细检查，看看代码的格式是不是写错了！\n\n"
  }
+  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
-        v-if="msg || infoTable.length"
-        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 v-if="msg" height="354" class="result" noresize>
+        <div>{{ msg }}</div>
      </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>
--- a/src/oj/problem/components/TestcasePanel.vue
+++ b/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>