From 3a53ee08468a4df68e99d6fc80737c9460a66689 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Thu, 4 Jul 2024 20:17:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=8A=E8=87=AA=E6=B5=8B=E7=8C=AB=E6=90=AC?=
 =?UTF-8?q?=E8=BF=9B=E6=9D=A5=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components.d.ts                          |   1 +
 src/oj/composables/code.ts                   |   3 +
 src/oj/problem/components/EditorWithTest.vue | 117 +++++++++++++++++++
 src/oj/problem/components/Form.vue           |  58 ++++++---
 src/oj/problem/detail.vue                    |  18 ++-
 src/shared/composables/switchScreen.ts       |   4 +-
 6 files changed, 171 insertions(+), 30 deletions(-)
 create mode 100644 src/oj/problem/components/EditorWithTest.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index d5783f6..bea993b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -49,6 +49,7 @@ declare module 'vue' {
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSplit: typeof import('naive-ui')['NSplit']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
diff --git a/src/oj/composables/code.ts b/src/oj/composables/code.ts
index 02cc9ab..bfe72a0 100644
--- a/src/oj/composables/code.ts
+++ b/src/oj/composables/code.ts
@@ -6,3 +6,6 @@ export const code = reactive<Code>({
   value: "",
   language: storage.get(STORAGE_KEY.LANGUAGE) || "Python3",
 })
+
+export const input = ref("")
+export const output = ref("")
diff --git a/src/oj/problem/components/EditorWithTest.vue b/src/oj/problem/components/EditorWithTest.vue
new file mode 100644
index 0000000..12be4c7
--- /dev/null
+++ b/src/oj/problem/components/EditorWithTest.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { SOURCES } from "utils/constants"
+import { code, input, output } from "oj/composables/code"
+import { isDesktop } from "~/shared/composables/breakpoints"
+import { problem } from "oj/composables/problem"
+import storage from "~/utils/storage"
+import Form from "./Form.vue"
+import CodeEditor from "~/shared/components/CodeEditor.vue"
+
+const route = useRoute()
+const contestID = !!route.params.contestID ? route.params.contestID : null
+
+const storageKey = computed(
+  () =>
+    `problem_${problem.value!._id}_contest_${contestID}_lang_${code.language}`,
+)
+
+onMounted(() => {
+  if (storage.get(storageKey.value)) {
+    code.value = storage.get(storageKey.value)
+  } else {
+    code.value =
+      problem.value!.template[code.language] || SOURCES[code.language]
+  }
+})
+
+const editorHeight = computed(() =>
+  isDesktop.value ? "calc(100vh - 133px)" : "calc(100vh - 172px)",
+)
+
+function changeCode(v: string) {
+  storage.set(storageKey.value, v)
+}
+
+function changeLanguage(v: string) {
+  if (
+    storage.get(storageKey.value) &&
+    storageKey.value.split("_").pop() === v
+  ) {
+    code.value = storage.get(storageKey.value)
+  } else {
+    code.value =
+      problem.value!.template[code.language] || SOURCES[code.language]
+  }
+}
+</script>
+
+<template>
+  <n-flex vertical>
+    <Form
+      :storage-key="storageKey"
+      @change-language="changeLanguage"
+      with-test
+    />
+    <n-split direction="horizontal" :min="1 / 3" :max="4 / 5">
+      <template #1>
+        <CodeEditor
+          v-model:value="code.value"
+          @update:model-value="changeCode"
+          :language="code.language"
+          :height="editorHeight"
+        />
+      </template>
+      <template #2>
+        <n-split
+          direction="vertical"
+          :default-size="1 / 3"
+          :min="1 / 5"
+          :max="3 / 5"
+        >
+          <template #1>
+            <div class="title">输入框</div>
+            <n-input
+              v-model:value="input"
+              type="textarea"
+              :bordered="false"
+              :resizable="false"
+              class="box"
+            />
+          </template>
+          <template #2>
+            <div class="title">输出框</div>
+            <n-input
+              class="box output"
+              v-model:value="output"
+              placeholder=""
+              type="textarea"
+              :bordered="false"
+              :resizable="false"
+              readonly
+            />
+          </template>
+        </n-split>
+      </template>
+    </n-split>
+  </n-flex>
+</template>
+
+<style scoped>
+.title {
+  height: 40px;
+  line-height: 40px;
+  padding-left: 20px;
+  font-size: 16px;
+}
+
+.box {
+  padding-left: 10px;
+  box-sizing: border-box;
+  height: calc(100% - 40px);
+  font-size: 20px;
+}
+
+.output {
+  font-family: "Monaco";
+}
+</style>
diff --git a/src/oj/problem/components/Form.vue b/src/oj/problem/components/Form.vue
index 721b7a8..b4a7e11 100644
--- a/src/oj/problem/components/Form.vue
+++ b/src/oj/problem/components/Form.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import copy from "copy-text-to-clipboard"
+import copyText from "copy-text-to-clipboard"
 import { LANGUAGE_SHOW_VALUE, SOURCES } from "utils/constants"
-import { code } from "oj/composables/code"
+import { code, input, output } from "oj/composables/code"
 import { problem } from "oj/composables/problem"
 import { isDesktop, isMobile } from "~/shared/composables/breakpoints"
 import { useUserStore } from "~/shared/store/user"
@@ -9,15 +9,29 @@ import Submit from "./Submit.vue"
 import storage from "~/utils/storage"
 import { STORAGE_KEY } from "utils/constants"
 import { LANGUAGE } from "~/utils/types"
+import { createTestSubmission } from "~/utils/judge"
+
+interface Props {
+  storageKey: string
+  withTest?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  withTest: false,
+})
 
 const message = useMessage()
 const route = useRoute()
 const router = useRouter()
 const userStore = useUserStore()
 
-const props = defineProps<{ storageKey: string }>()
 const emit = defineEmits(["changeLanguage"])
 
+function copy() {
+  copyText(code.value)
+  message.success("代码复制成功")
+}
+
 function reset() {
   code.value = problem.value!.template[code.language] || SOURCES[code.language]
   storage.remove(props.storageKey)
@@ -34,6 +48,11 @@ function goEdit() {
   window.open(data.href, "_blank")
 }
 
+async function test() {
+  const res = await createTestSubmission(code, input.value)
+  output.value = res.output
+}
+
 const menu = computed<DropdownOption[]>(() => [
   { label: "提交信息", key: "submissions", show: isMobile.value },
   { label: "自测猫", key: "test", show: isMobile.value },
@@ -66,8 +85,7 @@ async function select(key: string) {
       reset()
       break
     case "copy":
-      copy(code.value)
-      message.success("代码复制成功")
+      copy()
       break
     case "test":
       window.open("https://code.xuyue.cc", "_blank")
@@ -95,19 +113,23 @@ function gotoTestCat() {
       :size="isDesktop ? 'medium' : 'small'"
       :options="options"
     />
-    <Submit />
-    <n-button v-if="isDesktop" @click="gotoTestCat">自测猫</n-button>
-    <n-button v-if="isDesktop" @click="goSubmissions">提交信息</n-button>
-    <n-dropdown :options="menu" @select="select">
-      <n-button :size="isDesktop ? 'medium' : 'small'">操作</n-button>
-    </n-dropdown>
-    <n-button
-      v-if="isDesktop && userStore.isSuperAdmin"
-      type="warning"
-      @click="goEdit"
-    >
-      编辑
-    </n-button>
+    <n-button v-if="withTest" @click="reset">重置代码</n-button>
+    <n-button v-if="withTest" type="primary" secondary @click="test">运行代码</n-button>
+    <n-flex align="center" v-if="!withTest">
+      <Submit />
+      <n-button v-if="isDesktop" @click="gotoTestCat">自测猫</n-button>
+      <n-button v-if="isDesktop" @click="goSubmissions">提交信息</n-button>
+      <n-dropdown :options="menu" @select="select">
+        <n-button :size="isDesktop ? 'medium' : 'small'">操作</n-button>
+      </n-dropdown>
+      <n-button
+        v-if="isDesktop && userStore.isSuperAdmin"
+        type="warning"
+        @click="goEdit"
+      >
+        编辑
+      </n-button>
+    </n-flex>
   </n-flex>
 </template>
 
diff --git a/src/oj/problem/detail.vue b/src/oj/problem/detail.vue
index 97447d2..fab1275 100644
--- a/src/oj/problem/detail.vue
+++ b/src/oj/problem/detail.vue
@@ -6,6 +6,7 @@ import { problem } from "../composables/problem"
 import { ScreenMode } from "utils/constants"
 
 const Editor = defineAsyncComponent(() => import("./components/Editor.vue"))
+const EditorWithTest = defineAsyncComponent(() => import("./components/EditorWithTest.vue"))
 const ProblemContent = defineAsyncComponent(
   () => import("./components/ProblemContent.vue"),
 )
@@ -30,18 +31,12 @@ const props = withDefaults(defineProps<Props>(), {
 
 const errMsg = ref("无数据")
 
-const onlyDetail = computed(
+const bothAndProblem = computed(
   () =>
     screenMode.value === ScreenMode.both ||
     screenMode.value === ScreenMode.problem,
 )
 
-const onlyCode = computed(
-  () =>
-    screenMode.value === ScreenMode.both ||
-    screenMode.value === ScreenMode.code,
-)
-
 async function init() {
   try {
     const res = await getProblem(props.problemID, props.contestID)
@@ -66,7 +61,7 @@ onBeforeUnmount(() => {
     x-gap="16"
     :cols="screenMode === ScreenMode.both ? 2 : 1"
   >
-    <n-gi :span="isDesktop ? 1 : 2" v-show="onlyDetail">
+    <n-gi :span="isDesktop ? 1 : 2" v-if="bothAndProblem">
       <n-scrollbar v-if="isDesktop" style="max-height: calc(100vh - 92px)">
         <n-tabs default-value="content" type="segment">
           <n-tab-pane name="content" tab="题目描述">
@@ -101,8 +96,11 @@ onBeforeUnmount(() => {
         </n-tab-pane>
       </n-tabs>
     </n-gi>
-    <n-gi v-if="isDesktop" v-show="onlyCode">
-      <Editor />
+    <n-gi v-if="isDesktop && screenMode === ScreenMode.both">
+      <Editor/>
+    </n-gi>
+    <n-gi v-if="isDesktop && screenMode === ScreenMode.code">
+      <EditorWithTest />
     </n-gi>
   </n-grid>
   <n-empty v-else :description="errMsg"></n-empty>
diff --git a/src/shared/composables/switchScreen.ts b/src/shared/composables/switchScreen.ts
index f44865f..d219039 100644
--- a/src/shared/composables/switchScreen.ts
+++ b/src/shared/composables/switchScreen.ts
@@ -3,9 +3,9 @@ import { ScreenMode } from "~/utils/constants"
 export const screenMode = ref(ScreenMode.both)
 
 export const screenSwitchLabel = computed(() => {
-  if (screenMode.value === ScreenMode.both) return "题目 | 代码"
+  if (screenMode.value === ScreenMode.both) return "题目 | 自测"
   else if (screenMode.value === ScreenMode.problem) return "仅题目"
-  return "仅代码"
+  return "仅自测"
 })
 
 export function switchScreenMode() {