testcat.

src/oj/problem/components/Form.vue

@@ -5,6 +5,7 @@ import { problem } from "oj/composables/problem"
 import { isDesktop, isMobile } from "~/shared/composables/breakpoints"
 import { useUserStore } from "~/shared/store/user"
 import Submit from "./Submit.vue"
+import TestCat from "./TestCat.vue"
 import storage from "~/utils/storage"
 import { STORAGE_KEY } from "utils/constants"
 import { LANGUAGE } from "~/utils/types"
@@ -24,20 +25,14 @@ function goSubmissions() {
   router.push({ name, query: { problem: problem.value!._id } })
 }
 
-function goTestCat() {
-  const data = router.resolve({ name: "play" })
-  window.open(data.href, "_blank")
-}
+function goTestCat() {}
 
 function goEdit() {
   const data = router.resolve("/admin/problem/edit/" + problem.value!.id)
   window.open(data.href, "_blank")
 }
 
-const menu: DropdownOption[] = [
-  { label: "提交信息", key: "submissions" },
-  { label: "自测猫", key: "testcat" },
-]
+const menu: DropdownOption[] = [{ label: "提交信息", key: "submissions" }]
 
 const options: DropdownOption[] = problem.value!.languages.map((it) => ({
   label: () => [
@@ -60,9 +55,6 @@ function select(key: string) {
     case "submissions":
       goSubmissions()
       break
-    case "testcat":
-      goTestCat()
-      break
   }
 }
 
@@ -73,7 +65,7 @@ function changeLanguage(v: LANGUAGE) {
 </script>
 
 <template>
-  <n-space>
+  <n-space align="center">
     <n-select
       class="language"
       v-model:value="code.language"
@@ -99,17 +91,11 @@ function changeLanguage(v: LANGUAGE) {
         </template>
       </n-button>
     </n-dropdown>
+    <n-button v-if="isDesktop" @click="goSubmissions">提交信息</n-button>
+    <TestCat />
     <n-button
-      :size="isDesktop ? 'medium' : 'small'"
-      v-if="isDesktop"
-      @click="goSubmissions"
-    >
-      提交信息
-    </n-button>
-    <n-button
-      type="warning"
-      :size="isDesktop ? 'medium' : 'small'"
       v-if="isDesktop && userStore.isSuperAdmin"
+      type="warning"
       @click="goEdit"
     >
       编辑

src/oj/problem/components/TestCat.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { code } from "oj/composables/code"
+import { createTestSubmission } from "~/utils/judge"
+
+const input = ref("")
+const output = ref("")
+
+async function test() {
+  output.value = "运行中..."
+  const res = await createTestSubmission(code, input.value)
+  output.value = res.output
+}
+function clear() {
+  const id = setTimeout(() => {
+    clearTimeout(id)
+    output.value = ""
+  }, 200)
+}
+</script>
+<template>
+  <n-popover
+    trigger="click"
+    placement="bottom-end"
+    scrollable
+    :show-arrow="false"
+    style="max-height: 600px; max-width: 800px"
+    @clickoutside="clear"
+  >
+    <template #trigger>
+      <n-button>输入输出</n-button>
+    </template>
+    <n-space vertical>
+      <n-input type="textarea" v-model:value="input" />
+      <n-space justify="end">
+        <n-button @click="test">运行</n-button>
+      </n-space>
+      <div class="testcase">{{ output }}</div>
+    </n-space>
+  </n-popover>
+</template>
+<style scoped>
+.testcase {
+  white-space: pre;
+  font-size: 16px;
+}
+</style>

src/play/index.vue

@@ -1,73 +0,0 @@
-<script lang="ts" setup>
-import CodeEditor from "~/shared/CodeEditor.vue"
-import { LANGUAGE_SHOW_VALUE } from "~/utils/constants"
-import { LANGUAGE } from "~/utils/types"
-const code = ref("")
-const input = ref("输入信息")
-const output = ref("运行结果")
-const language = ref<LANGUAGE>("C")
-
-const languages: LANGUAGE[] = ["C", "Python3"]
-const options: DropdownOption[] = languages.map((it) => ({
-  label: () => [
-    h("img", {
-      src: `/${it}.svg`,
-      style: {
-        width: "16px",
-        height: "16px",
-        marginRight: "8px",
-        transform: "translateY(3px)",
-      },
-    }),
-    LANGUAGE_SHOW_VALUE[it],
-  ],
-  value: it,
-}))
-</script>
-<template>
-  <n-layout>
-    <n-layout-header bordered class="header">
-      <n-space align="center" justify="space-between" class="header">
-        <div class="title">徐越的自测猫</div>
-        <n-space>
-          <n-select class="language" v-model="language" :options="options" />
-          <n-button type="primary">运行 F5</n-button>
-        </n-space>
-      </n-space>
-    </n-layout-header>
-    <n-layout-content>
-      <n-grid :cols="2" class="content">
-        <n-gi>
-          <CodeEditor v-model="code" :language="language" />
-        </n-gi>
-        <n-gi>
-          <n-grid :cols="1" class="content">
-            <n-gi>
-              <CodeEditor v-model="input" :language="language" />
-            </n-gi>
-            <n-gi>
-              <CodeEditor v-model="output" :language="language" readonly />
-            </n-gi>
-          </n-grid>
-        </n-gi>
-      </n-grid>
-    </n-layout-content>
-  </n-layout>
-</template>
-<style scoped>
-.header {
-  height: 60px;
-  padding: 0 8px;
-}
-.title {
-  font-size: 18px;
-}
-
-.content {
-  height: calc(100vh - 60px);
-}
-
-.language {
-  width: 120px;
-}
-</style>

src/routes.ts

@@ -92,11 +92,6 @@ export const routes: RouteRecordRaw[] = [
       },
     ],
   },
-  {
-    path: "/play",
-    component: () => import("~/play/index.vue"),
-    name: "play",
-  },
   {
     path: "/admin",
     component: () => import("~/shared/layout/admin.vue"),

src/shared/CodeEditor.vue

@@ -23,6 +23,7 @@ interface Props {
   fontSize?: number
   height?: string
   readonly?: boolean
+  placeholder?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -30,6 +31,7 @@ const props = withDefaults(defineProps<Props>(), {
   fontSize: 20,
   height: "100%",
   readonly: false,
+  placeholder: "",
 })
 
 const code = ref(props.modelValue)
@@ -55,11 +57,12 @@ function onChange(v: string) {
 <template>
   <Codemirror
     v-model="code"
-    :extensions="[styleTheme, lang, isDark ? oneDark : smoothy]"
     indentWithTab
+    :extensions="[styleTheme, lang, isDark ? oneDark : smoothy]"
     :disabled="props.readonly"
     :tabSize="4"
-    @change="onChange"
+    :placeholder="props.placeholder"
     :style="{ height: props.height, fontSize: props.fontSize + 'px' }"
+    @change="onChange"
   />
 </template>

src/shared/Header.vue

@@ -59,15 +59,6 @@ const menus = computed<MenuOption[]>(() => [
     show: userStore.isAdminRole,
     key: "admin",
   },
-  {
-    label: () =>
-      h(
-        RouterLink,
-        { to: "/play", target: "_blank" },
-        { default: () => "自测" }
-      ),
-    key: "play",
-  },
 ])
 
 const options: Array<DropdownOption | DropdownDividerOption> = [