add testcase panel.

src/App.vue

@@ -3,7 +3,7 @@ import zhCn from "element-plus/dist/locale/zh-cn.mjs"
 </script>
 
 <template>
-  <el-config-provider :locale="zhCn" :button="{ autoInsertSpace: true }">
+  <el-config-provider :locale="zhCn">
     <router-view></router-view>
   </el-config-provider>
 </template>

src/components.d.ts

@@ -43,6 +43,7 @@ declare module '@vue/runtime-core' {
     IEpLoading: typeof import('~icons/ep/loading')['default']
     IEpSelect: typeof import('~icons/ep/select')['default']
     IEpSemiSelect: typeof import('~icons/ep/semi-select')['default']
+    IEpVideoPlay: typeof import('~icons/ep/video-play')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

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

@@ -6,7 +6,7 @@ import { submissionExists } from "../../api"
 import SubmitPanel from "./submit-panel.vue"
 import TestcasePanel from "./testcase-panel.vue"
 
-const tab = ref("testcase")
+const tab = ref("test")
 const submitPanelRef = ref<{ submit: Function }>()
 const problem = inject<Ref<Problem>>("problem")
 const [tried] = useToggle()
@@ -21,7 +21,7 @@ async function checkIfTried() {
 }
 
 function onTab(pane: TabsPaneContext) {
-  if (pane.paneName === "result") {
+  if (pane.paneName === "submit") {
     submitPanelRef && submitPanelRef.value!.submit()
   }
 }

src/oj/problem/components/editor.vue

@@ -8,17 +8,17 @@ import {
 import { isMobile } from "../../../utils/breakpoints"
 import { Problem } from "../../../utils/types"
 import EditorExec from "./editor-exec.vue"
+import { useCodeStore } from "../../stores/code"
 
 interface Props {
   problem: Problem
 }
 
 const props = defineProps<Props>()
-const code = reactive({
-  value: SOURCES[props.problem.languages[0] || "C"],
-  language: props.problem.languages[0] || "C",
-})
-provide("code", readonly(code))
+
+const { code, setLanguage, setValue } = useCodeStore()
+setValue(SOURCES[props.problem.languages[0] || "C"])
+setLanguage(props.problem.languages[0] || "C")
 
 const monacoEditorRef = ref()
 
@@ -45,20 +45,22 @@ watch(
   }
 )
 
+function run() {}
+
 function reset() {
-  code.value = props.problem.template[code.language] || SOURCES[code.language]
+  setValue(props.problem.template[code.language] || SOURCES[code.language])
   if (monaco && monaco.editor) {
     monaco.editor.getModels()[0].setValue(code.value)
   }
 }
 
 async function init() {
-  code.value = props.problem.template[code.language] || SOURCES[code.language]
+  setValue(props.problem.template[code.language] || SOURCES[code.language])
   monaco = await loader.init()
   monaco.editor.create(monacoEditorRef.value, {
     value: code.value, // 编辑器初始显示文字
     language: LANGUAGE_VALUE[code.language],
-    theme: "vs-dark", // 官方自带三种主题vs, hc-black, or vs-dark
+    theme: "vs", // 官方自带三种主题vs, hc-black, or vs-dark
     minimap: {
       enabled: false,
     },
@@ -69,7 +71,7 @@ async function init() {
     scrollBeyondLastLine: false, // 取消代码后面一大段空白
   })
   monaco.editor.getModels()[0].onDidChangeContent(() => {
-    code.value = monaco.editor.getModels()[0].getValue()
+    setValue(monaco.editor.getModels()[0].getValue())
   })
 }
 </script>
@@ -109,6 +111,6 @@ async function init() {
 }
 
 .editorMobile {
-  height: 500px;
+  height: calc(100vh - 612px);
 }
 </style>

src/oj/problem/components/problem-content.vue

@@ -1,10 +1,31 @@
 <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 { SOURCES } from "../../../utils/constants"
 
 interface Props {
   problem: Problem
 }
-defineProps<Props>()
+
+const props = defineProps<Props>()
+
+const { code } = useCodeStore()
+const testcaseResultStore = useTestcaseReultStore()
+
+const disabled = computed(
+  () =>
+    !!(
+      code.value.trim() === "" ||
+      code.value === props.problem.template[code.language] ||
+      code.value === SOURCES[code.language]
+    )
+)
+
+function test(input: string) {
+  testcaseResultStore.runTestcase(code, input)
+}
 </script>
 
 <template>
@@ -26,7 +47,16 @@ defineProps<Props>()
   </div>
 
   <div v-for="(sample, index) of problem.samples" :key="index">
-    <p class="title">测试用例 {{ index + 1 }}</p>
+    <el-space>
+      <p class="title testcaseTitle">测试用例 {{ index + 1 }}</p>
+      <el-button
+        :icon="Flag"
+        type="success"
+        :disabled="disabled"
+        circle
+        @click="test(sample.input)"
+      ></el-button>
+    </el-space>
     <el-descriptions border direction="vertical">
       <el-descriptions-item width="50%" label="输入">
         <div class="testcase">{{ sample.input }}</div>
@@ -49,6 +79,9 @@ defineProps<Props>()
   margin: 24px 0 16px 0;
   color: var(--el-color-primary);
 }
+.testcaseTitle {
+  margin-bottom: 24px;
+}
 
 .content {
   line-height: 2;

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

@@ -10,21 +10,14 @@ import {
   submissionMemoryFormat,
   submissionTimeFormat,
 } from "../../../utils/functions"
-import {
-  Code,
-  Problem,
-  Submission,
-  SubmitCodePayload,
-} from "../../../utils/types"
+import { Problem, Submission, SubmitCodePayload } from "../../../utils/types"
 import { getSubmission, submitCode } from "../../api"
 
 import SubmissionResultTag from "../../components/submission-result-tag.vue"
+import { useCodeStore } from "../../stores/code"
 
-const code = inject<Code>("code", {
-  value: "",
-  language: "C",
-})
 const problem = inject<Ref<Problem>>("problem")
+const { code } = useCodeStore()
 
 const route = useRoute()
 const contestID = <string>route.params.contestID || ""
@@ -183,7 +176,7 @@ watch(
 defineExpose({ submit })
 </script>
 <template>
-  <el-tab-pane :disabled="submitDisabled" name="result">
+  <el-tab-pane :disabled="submitDisabled" name="submit">
     <template #label>
       <el-space :size="2">
         <el-icon>

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

@@ -1,17 +1,13 @@
-<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>
+<script setup lang="ts"></script>
 
 <template>
-  <el-tab-pane label="测试用例" name="testcase">
-    <div class="panel">
-      <el-table height="320"> el- </el-table>
-    </div>
+  <el-tab-pane label="测试 & 运行" name="test">
+    <div class="panel"></div>
   </el-tab-pane>
 </template>
 
-<style scoped></style>
+<style scoped>
+.panel {
+  height: 320px;
+}
+</style>

src/oj/problem/detail.vue

@@ -15,6 +15,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const { data: problem, isFinished } = getProblem(props.problemID)
+
 provide("problem", readonly(problem))
 </script>
 

src/oj/stores/code.ts

@@ -0,0 +1,18 @@
+import { Code, LANGUAGE } from "../../utils/types"
+
+export const useCodeStore = defineStore("code", () => {
+  const code = reactive<Code>({
+    value: "",
+    language: "C",
+  })
+
+  function setValue(value: string) {
+    code.value = value
+  }
+
+  function setLanguage(language: LANGUAGE) {
+    code.language = language
+  }
+
+  return { code, setLanguage, setValue }
+})

src/oj/stores/testcaseResult.ts

@@ -0,0 +1,11 @@
+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 }
+})