add submissions.

This commit is contained in:
2023-01-15 17:12:07 +08:00
parent a62f744a9a
commit eaa5a8516e
34 changed files with 1652 additions and 1592 deletions

View File

@@ -7,7 +7,7 @@
"start": "vite", "start": "vite",
"build": "vue-tsc && vite build", "build": "vue-tsc && vite build",
"preview": "vite preview", "preview": "vite preview",
"fmt": "prettier --write src *.d.ts *.ts" "fmt": "prettier --write src *.ts"
}, },
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.0.10", "@element-plus/icons-vue": "^2.0.10",

1
src/components.d.ts vendored
View File

@@ -8,7 +8,6 @@ export {}
declare module '@vue/runtime-core' { declare module '@vue/runtime-core' {
export interface GlobalComponents { export interface GlobalComponents {
ElAlert: typeof import('element-plus/es')['ElAlert'] ElAlert: typeof import('element-plus/es')['ElAlert']
ElAside: typeof import('element-plus/es')['ElAside']
ElButton: typeof import('element-plus/es')['ElButton'] ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard'] ElCard: typeof import('element-plus/es')['ElCard']
ElCol: typeof import('element-plus/es')['ElCol'] ElCol: typeof import('element-plus/es')['ElCol']

View File

@@ -1 +1 @@
<template>loading...</template> <template>loading...</template>

View File

@@ -1,31 +1,31 @@
<script setup lang="ts"> <script setup lang="ts">
import Loading from "./components/Loading.vue" import Loading from "./components/Loading.vue"
import Monaco from "../shared/monaco/index.vue" import Monaco from "../shared/monaco/index.vue"
const route = useRoute() const route = useRoute()
const step = route.hash.replace("#step-", "") || "1" const step = route.hash.replace("#step-", "") || "1"
const Md = defineAsyncComponent({ const Md = defineAsyncComponent({
loader: () => import(`./step-${step}/index.md`), loader: () => import(`./step-${step}/index.md`),
loadingComponent: Loading, loadingComponent: Loading,
}) })
const code = ref("") const code = ref("")
function change(value: string) { function change(value: string) {
code.value = value code.value = value
} }
</script> </script>
<template> <template>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<Md /> <Md />
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<Monaco :value="code" @change="change" /> <Monaco :value="code" @change="change" />
</el-col> </el-col>
</el-row> </el-row>
</template> </template>
<style scoped></style> <style scoped></style>

View File

@@ -1,9 +1,9 @@
# 我的是第一步骤 # 我的是第一步骤
```c ```c
#include<stdio.h> #include<stdio.h>
int main() { int main() {
return 0; return 0;
} }
``` ```

View File

@@ -2,7 +2,12 @@ import { useAxios } from "@vueuse/integrations/useAxios"
import http from "utils/http" import http from "utils/http"
import { getACRate } from "utils/functions" import { getACRate } from "utils/functions"
import { DIFFICULTY } from "utils/constants" import { DIFFICULTY } from "utils/constants"
import { Problem, SubmitCodePayload, Submission } from "utils/types" import {
Problem,
SubmitCodePayload,
Submission,
SubmissionListPayload,
} from "utils/types"
function filterResult(result: Problem) { function filterResult(result: Problem) {
const newResult: any = { const newResult: any = {
@@ -14,11 +19,11 @@ function filterResult(result: Problem) {
rate: getACRate(result.accepted_number, result.submission_number), rate: getACRate(result.accepted_number, result.submission_number),
} }
if (result.my_status === null || result.my_status === undefined) { if (result.my_status === null || result.my_status === undefined) {
newResult.status = "none" newResult.status = "not_test"
} else if (result.my_status === 0) { } else if (result.my_status === 0) {
newResult.status = "done" newResult.status = "passed"
} else { } else {
newResult.status = "tried" newResult.status = "failed"
} }
return newResult return newResult
} }
@@ -78,15 +83,6 @@ export function submitCode(data: SubmitCodePayload) {
return http.post("submission", data) return http.post("submission", data)
} }
export function listSubmissions(params: { export function listSubmissions(params: SubmissionListPayload) {
myself: "1" | "0" return useAxios("submissions", { params }, http, { immediate: false })
result: string
username: string
page: number
contest_id: string
problem_id: string
limit: number
offset: number
}) {
return useAxios("submissions", { params }, http)
} }

View File

@@ -1,17 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { JUDGE_STATUS } from "../../utils/constants" import { JUDGE_STATUS } from "../../utils/constants"
import { SUBMISSION_RESULT } from "../../utils/types" import { SUBMISSION_RESULT } from "../../utils/types"
interface Props { interface Props {
result: SUBMISSION_RESULT result: SUBMISSION_RESULT
} }
defineProps<Props>() defineProps<Props>()
</script> </script>
<template> <template>
<el-tag :type="(JUDGE_STATUS[result]['type'] as any)" disable-transitions> <el-tag :type="JUDGE_STATUS[result]['type']" disable-transitions>
{{ JUDGE_STATUS[result]["name"] }} {{ JUDGE_STATUS[result]["name"] }}
</el-tag> </el-tag>
</template> </template>
<style scoped></style> <style scoped></style>

View File

@@ -1,5 +1,5 @@
<script setup lang="ts"></script> <script setup lang="ts"></script>
<template>contest detail</template> <template>contest detail</template>
<style scoped></style> <style scoped></style>

View File

@@ -1,84 +1,84 @@
<script lang="ts" setup> <script lang="ts" setup>
import { TabsPaneContext } from "element-plus" import { TabsPaneContext } from "element-plus"
import { SOURCES } from "utils/constants" import { SOURCES } from "utils/constants"
import { Problem } from "utils/types" import { Problem } from "utils/types"
import Monaco from "~/shared/Monaco/index.vue" import Monaco from "~/shared/Monaco/index.vue"
import { useCodeStore } from "oj/store/code" import { useCodeStore } from "oj/store/code"
import SubmitPanel from "./SubmitPanel.vue" const SubmitPanel = defineAsyncComponent(() => import("./SubmitPanel.vue"))
import TestcasePanel from "./TestcasePanel.vue" const TestcasePanel = defineAsyncComponent(() => import("./TestcasePanel.vue"))
interface Props { interface Props {
problem: Problem problem: Problem
} }
const props = defineProps<Props>() const props = defineProps<Props>()
const { code } = useCodeStore() const { code } = useCodeStore()
code.language = props.problem.languages[0] || "C" code.language = props.problem.languages[0] || "C"
code.value = props.problem.template[code.language] || SOURCES[code.language] code.value = props.problem.template[code.language] || SOURCES[code.language]
const tab = ref("test") const tab = ref("test")
const submitPanelRef = ref<{ submit: Function }>() const submitPanelRef = ref<{ submit: Function }>()
watch(() => code.language, reset) watch(() => code.language, reset)
function reset() { function reset() {
code.value = props.problem.template[code.language] || SOURCES[code.language] code.value = props.problem.template[code.language] || SOURCES[code.language]
} }
function change(value: string) { function change(value: string) {
code.value = value code.value = value
} }
function onTab(pane: TabsPaneContext) { function onTab(pane: TabsPaneContext) {
if (pane.paneName === "submit") { if (pane.paneName === "submit") {
submitPanelRef && submitPanelRef.value!.submit() submitPanelRef && submitPanelRef.value!.submit()
} }
} }
</script> </script>
<template> <template>
<el-form inline> <el-form inline>
<el-form-item label="语言" label-width="60"> <el-form-item label="语言" label-width="60">
<el-select v-model="code.language" class="language"> <el-select v-model="code.language" class="language">
<el-option v-for="item in problem.languages" :key="item" :value="item"> <el-option v-for="item in problem.languages" :key="item" :value="item">
<img class="logo" :src="`/${item}.svg`" alt="logo" />&nbsp;&nbsp; <img class="logo" :src="`/${item}.svg`" alt="logo" />&nbsp;&nbsp;
<span>{{ item }}</span> <span>{{ item }}</span>
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="reset">重置</el-button> <el-button @click="reset">重置</el-button>
<el-button @click="$router.push(`/status?problem=${problem.id}`)"> <el-button @click="$router.push(`/status?problem=${problem._id}`)">
提交信息 提交信息
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<Monaco <Monaco
class="editor" class="editor"
:language="code.language" :language="code.language"
:value="code.value" :value="code.value"
@change="change" @change="change"
height="calc(100vh - 621px)" height="calc(100vh - 621px)"
/> />
<el-tabs type="border-card" @tab-click="onTab" v-model="tab"> <el-tabs type="border-card" @tab-click="onTab" v-model="tab">
<TestcasePanel /> <TestcasePanel />
<SubmitPanel ref="submitPanelRef" /> <SubmitPanel ref="submitPanelRef" />
</el-tabs> </el-tabs>
</template> </template>
<style scoped> <style scoped>
.language { .language {
width: 110px; width: 110px;
} }
.editor { .editor {
min-height: 200px; min-height: 200px;
} }
.logo { .logo {
width: 12px; width: 12px;
} }
</style> </style>

View File

@@ -1,180 +1,180 @@
<script setup lang="ts"> <script setup lang="ts">
import { Flag, CloseBold, Select, CopyDocument } from "@element-plus/icons-vue" import { Flag, CloseBold, Select, CopyDocument } from "@element-plus/icons-vue"
import copy from "copy-text-to-clipboard" import copy from "copy-text-to-clipboard"
import { useCodeStore } from "oj/store/code" import { useCodeStore } from "oj/store/code"
import { SOURCES } from "utils/constants" import { SOURCES } from "utils/constants"
import { Problem } from "utils/types" import { Problem, ProblemStatus } from "utils/types"
import { createTestSubmission } from "utils/judge" import { createTestSubmission } from "utils/judge"
import { submissionExists } from "oj/api" import { submissionExists } from "oj/api"
interface Props { interface Props {
problem: Problem problem: Problem
} }
type Sample = Problem["samples"][number] & { type Sample = Problem["samples"][number] & {
id: number id: number
msg: string msg: string
status: "passed" | "failed" | "not_test" status: ProblemStatus
loading: boolean loading: boolean
} }
const props = defineProps<Props>() const props = defineProps<Props>()
const route = useRoute() const route = useRoute()
const contestID = <string>route.params.contestID const contestID = <string>route.params.contestID
const { data: hasSolved, execute } = submissionExists(props.problem.id) const { data: hasSolved, execute } = submissionExists(props.problem.id)
if (contestID) { if (contestID) {
execute() execute()
} }
const samples = ref<Sample[]>( const samples = ref<Sample[]>(
props.problem.samples.map((sample, index) => ({ props.problem.samples.map((sample, index) => ({
...sample, ...sample,
id: index, id: index,
msg: "", msg: "",
status: "not_test", status: "not_test",
loading: false, loading: false,
})) }))
) )
const { code } = useCodeStore() const { code } = useCodeStore()
const disabled = computed( const disabled = computed(
() => () =>
!!( !!(
code.value.trim() === "" || code.value.trim() === "" ||
code.value === props.problem.template[code.language] || code.value === props.problem.template[code.language] ||
code.value === SOURCES[code.language] code.value === SOURCES[code.language]
) )
) )
async function test(sample: Sample, index: number) { async function test(sample: Sample, index: number) {
samples.value = samples.value.map((sample) => { samples.value = samples.value.map((sample) => {
if (sample.id === index) { if (sample.id === index) {
sample.loading = true sample.loading = true
} }
return sample return sample
}) })
const res = await createTestSubmission(code, sample.input) const res = await createTestSubmission(code, sample.input)
samples.value = samples.value.map((sample) => { samples.value = samples.value.map((sample) => {
if (sample.id === index) { if (sample.id === index) {
const status = const status =
res.status === 3 && res.output.trim() === sample.output res.status === 3 && res.output.trim() === sample.output
? "passed" ? "passed"
: "failed" : "failed"
return { return {
...sample, ...sample,
msg: res.output, msg: res.output,
status: status, status: status,
loading: false, loading: false,
} }
} else { } else {
return sample return sample
} }
}) })
} }
const icon = (status: Sample["status"]) => const icon = (status: Sample["status"]) =>
({ ({
not_test: Flag, not_test: Flag,
failed: CloseBold, failed: CloseBold,
passed: Select, passed: Select,
}[status]) }[status])
const type = (status: Sample["status"]) => const type = (status: Sample["status"]) =>
({ ({
not_test: "warning", not_test: "warning",
failed: "danger", failed: "danger",
passed: "success", passed: "success",
}[status]) }[status])
</script> </script>
<template> <template>
<el-alert <el-alert
v-if="problem.my_status === 0 || (contestID && hasSolved)" v-if="problem.my_status === 0 || (contestID && hasSolved)"
type="success" type="success"
:closable="false" :closable="false"
center center
title="🎉 本 题 已 经 被 你 解 决 啦" title="🎉 本 题 已 经 被 你 解 决 啦"
effect="dark" effect="dark"
> >
</el-alert> </el-alert>
<h1>{{ problem.title }}</h1> <h1>{{ problem.title }}</h1>
<p class="title">描述</p> <p class="title">描述</p>
<div class="content" v-html="problem.description"></div> <div class="content" v-html="problem.description"></div>
<p class="title">输入</p> <p class="title">输入</p>
<div class="content" v-html="problem.input_description"></div> <div class="content" v-html="problem.input_description"></div>
<p class="title">输出</p> <p class="title">输出</p>
<div class="content" v-html="problem.output_description"></div> <div class="content" v-html="problem.output_description"></div>
<div v-if="problem.hint"> <div v-if="problem.hint">
<p class="title">提示</p> <p class="title">提示</p>
<el-card shadow="never"> <el-card shadow="never">
<div class="content" v-html="problem.hint"></div> <div class="content" v-html="problem.hint"></div>
</el-card> </el-card>
</div> </div>
<div v-for="(sample, index) of samples" :key="index"> <div v-for="(sample, index) of samples" :key="index">
<el-space> <el-space>
<p class="title testcaseTitle">测试用例 {{ index + 1 }}</p> <p class="title testcaseTitle">测试用例 {{ index + 1 }}</p>
<el-button <el-button
:icon="icon(sample.status)" :icon="icon(sample.status)"
:type="type(sample.status)" :type="type(sample.status)"
:disabled="disabled" :disabled="disabled"
:loading="sample.loading" :loading="sample.loading"
circle circle
@click="test(sample, index)" @click="test(sample, index)"
></el-button> ></el-button>
</el-space> </el-space>
<el-descriptions border direction="vertical" :column="2"> <el-descriptions border direction="vertical" :column="2">
<el-descriptions-item width="50%"> <el-descriptions-item width="50%">
<template #label> <template #label>
<el-space> <el-space>
<span>输入</span> <span>输入</span>
<el-icon @click="copy(sample.input)"><CopyDocument /> </el-icon> <el-icon @click="copy(sample.input)"><CopyDocument /> </el-icon>
</el-space> </el-space>
</template> </template>
<div class="testcase">{{ sample.input }}</div> <div class="testcase">{{ sample.input }}</div>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item width="50%"> <el-descriptions-item width="50%">
<template #label> <template #label>
<el-space> <el-space>
<span>输出</span> <span>输出</span>
<el-icon @click="copy(sample.output)"><CopyDocument /> </el-icon> <el-icon @click="copy(sample.output)"><CopyDocument /> </el-icon>
</el-space> </el-space>
</template> </template>
<div class="testcase">{{ sample.output }}</div> <div class="testcase">{{ sample.output }}</div>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="运行结果" v-if="sample.status === 'failed'"> <el-descriptions-item label="运行结果" v-if="sample.status === 'failed'">
<div class="testcase">{{ sample.msg }}</div> <div class="testcase">{{ sample.msg }}</div>
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
</div> </div>
<div v-if="problem.source"> <div v-if="problem.source">
<p class="title">来源</p> <p class="title">来源</p>
<div class="content" v-html="problem.source"></div> <div class="content" v-html="problem.source"></div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.title { .title {
font-size: 20px; font-size: 20px;
margin: 24px 0 16px 0; margin: 24px 0 16px 0;
color: var(--el-color-primary); color: var(--el-color-primary);
} }
.testcaseTitle { .testcaseTitle {
margin-bottom: 24px; margin-bottom: 24px;
} }
.content { .content {
line-height: 2; line-height: 2;
} }
.label { .label {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.testcase { .testcase {
white-space: pre; white-space: pre;
} }
</style> </style>

View File

@@ -1,63 +1,60 @@
<script setup lang="ts"> <script setup lang="ts">
import { DIFFICULTY } from "utils/constants" import { DIFFICULTY } from "utils/constants"
import { getACRate, getTagColor, parseTime } from "utils/functions" import { getACRate, getTagColor, parseTime } from "utils/functions"
import { isDesktop } from "~/shared/composables/breakpoints" import { isDesktop } from "~/shared/composables/breakpoints"
import { Problem } from "utils/types" import { Problem } from "utils/types"
interface Props { interface Props {
problem: Problem problem: Problem
} }
defineProps<Props>() defineProps<Props>()
</script> </script>
<template> <template>
<el-descriptions border :column="isDesktop ? 3 : 1"> <el-descriptions border :column="isDesktop ? 3 : 1">
<el-descriptions-item label="编号"> <el-descriptions-item label="编号">
{{ problem._id }} {{ problem._id }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="出题人"> <el-descriptions-item label="出题人">
{{ problem.created_by.username }} {{ problem.created_by.username }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="创建时间"> <el-descriptions-item label="创建时间">
{{ parseTime(problem.create_time) }} {{ parseTime(problem.create_time) }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="时间限制"> <el-descriptions-item label="时间限制">
{{ problem.time_limit }}毫秒 {{ problem.time_limit }}毫秒
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="内存限制"> <el-descriptions-item label="内存限制">
{{ problem.memory_limit }}MB {{ problem.memory_limit }}MB
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="难度"> <el-descriptions-item label="难度">
<el-tag <el-tag disable-transitions :type="getTagColor(problem.difficulty)">
disable-transitions {{ DIFFICULTY[problem.difficulty] }}
:type="(getTagColor(problem.difficulty) as any)" </el-tag>
> </el-descriptions-item>
{{ DIFFICULTY[problem.difficulty] }}
</el-tag> <el-descriptions-item label="提交正确">
</el-descriptions-item> {{ problem.accepted_number }}
</el-descriptions-item>
<el-descriptions-item label="提交正确"> <el-descriptions-item label="提交错误">
{{ problem.accepted_number }} {{ problem.submission_number - problem.accepted_number }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="提交错误"> <el-descriptions-item label="正确率">
{{ problem.submission_number - problem.accepted_number }} {{ getACRate(problem.accepted_number, problem.submission_number) }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="正确率">
{{ getACRate(problem.accepted_number, problem.submission_number) }} <el-descriptions-item :span="3" label="标签">
</el-descriptions-item> <el-space>
<el-tag
<el-descriptions-item :span="3" label="标签"> disable-transitions
<el-space> type="info"
<el-tag v-for="tag in problem.tags"
disable-transitions :key="tag"
type="info" >
v-for="tag in problem.tags" {{ tag }}
:key="tag" </el-tag>
> </el-space>
{{ tag }} </el-descriptions-item>
</el-tag> </el-descriptions>
</el-space> </template>
</el-descriptions-item>
</el-descriptions>
</template>

View File

@@ -1,231 +1,231 @@
<script setup lang="ts"> <script setup lang="ts">
import party from "party-js" import party from "party-js"
import { Ref } from "vue" import { Ref } from "vue"
import { SOURCES, JUDGE_STATUS, SubmissionStatus } from "utils/constants" import { SOURCES, JUDGE_STATUS, SubmissionStatus } from "utils/constants"
import { submissionMemoryFormat, submissionTimeFormat } from "utils/functions" import { submissionMemoryFormat, submissionTimeFormat } from "utils/functions"
import { Problem, Submission, SubmitCodePayload } from "utils/types" import { Problem, Submission, SubmitCodePayload } from "utils/types"
import { getSubmission, submitCode } from "oj/api" import { getSubmission, submitCode } from "oj/api"
import { useCodeStore } from "oj/store/code" import { useCodeStore } from "oj/store/code"
import SubmissionResultTag from "../../components/SubmissionResultTag.vue" import SubmissionResultTag from "../../components/SubmissionResultTag.vue"
const problem = inject<Ref<Problem>>("problem") const problem = inject<Ref<Problem>>("problem")
const { code } = useCodeStore() const { code } = useCodeStore()
const route = useRoute() const route = useRoute()
const contestID = <string>route.params.contestID ?? "" const contestID = <string>route.params.contestID ?? ""
const submissionId = ref("") const submissionId = ref("")
const submission = ref<Submission | null>(null) const submission = ref<Submission | null>(null)
const [submitted] = useToggle() const [submitted] = useToggle()
const { start: submitPending, isPending } = useTimeout(5000, { const { start: submitPending, isPending } = useTimeout(5000, {
controls: true, controls: true,
immediate: false, immediate: false,
}) })
const { start: fetchSubmission } = useTimeoutFn( const { start: fetchSubmission } = useTimeoutFn(
async () => { async () => {
const res = await getSubmission(submissionId.value) const res = await getSubmission(submissionId.value)
submission.value = res.data submission.value = res.data
const result = submission.value.result const result = submission.value.result
if ( if (
result === SubmissionStatus.judging || result === SubmissionStatus.judging ||
result === SubmissionStatus.pending result === SubmissionStatus.pending
) { ) {
fetchSubmission() fetchSubmission()
} else { } else {
submitted.value = false submitted.value = false
} }
}, },
2000, 2000,
{ immediate: false } { immediate: false }
) )
const judging = computed( const judging = computed(
() => () =>
!!(submission.value && submission.value.result === SubmissionStatus.judging) !!(submission.value && submission.value.result === SubmissionStatus.judging)
) )
const pending = computed( const pending = computed(
() => () =>
!!(submission.value && submission.value.result === SubmissionStatus.pending) !!(submission.value && submission.value.result === SubmissionStatus.pending)
) )
const submitting = computed( const submitting = computed(
() => () =>
!!( !!(
submission.value && submission.value &&
submission.value.result === SubmissionStatus.submitting submission.value.result === SubmissionStatus.submitting
) )
) )
const submitDisabled = computed(() => { const submitDisabled = computed(() => {
const value = code.value const value = code.value
if ( if (
value.trim() === "" || value.trim() === "" ||
value === problem!.value.template[code.language] || value === problem!.value.template[code.language] ||
value === SOURCES[code.language] value === SOURCES[code.language]
) { ) {
return true return true
} }
if (judging.value || pending.value || submitting.value) { if (judging.value || pending.value || submitting.value) {
return true return true
} }
if (submitted.value) { if (submitted.value) {
return true return true
} }
if (isPending.value) { if (isPending.value) {
return true return true
} }
return false return false
}) })
const submitLabel = computed(() => { const submitLabel = computed(() => {
if (submitting.value) { if (submitting.value) {
return "正在提交" return "正在提交"
} }
if (judging.value || pending.value) { if (judging.value || pending.value) {
return "正在评分" return "正在评分"
} }
if (isPending.value) { if (isPending.value) {
return "运行结果" return "运行结果"
} }
return "点击提交" return "点击提交"
}) })
const msg = computed(() => { const msg = computed(() => {
let msg = "" let msg = ""
const result = submission.value && submission.value.result const result = submission.value && submission.value.result
if ( if (
result === SubmissionStatus.compile_error || result === SubmissionStatus.compile_error ||
result === SubmissionStatus.runtime_error result === SubmissionStatus.runtime_error
) { ) {
msg += "请仔细检查,看看代码的格式是不是写错了!\n\n" msg += "请仔细检查,看看代码的格式是不是写错了!\n\n"
} }
if ( if (
submission.value && submission.value &&
submission.value.statistic_info && submission.value.statistic_info &&
submission.value.statistic_info.err_info submission.value.statistic_info.err_info
) { ) {
msg += submission.value.statistic_info.err_info msg += submission.value.statistic_info.err_info
} }
return msg return msg
}) })
const infoTable = computed(() => { const infoTable = computed(() => {
if ( if (
submission.value && submission.value &&
submission.value.result !== SubmissionStatus.accepted && submission.value.result !== SubmissionStatus.accepted &&
submission.value.result !== SubmissionStatus.compile_error && submission.value.result !== SubmissionStatus.compile_error &&
submission.value.result !== SubmissionStatus.runtime_error && submission.value.result !== SubmissionStatus.runtime_error &&
submission.value.info && submission.value.info &&
submission.value.info.data && submission.value.info.data &&
submission.value.info.data.length submission.value.info.data.length
) { ) {
const data = submission.value.info.data const data = submission.value.info.data
if (data.some((item) => item.result === 0)) { if (data.some((item) => item.result === 0)) {
return submission.value.info.data return submission.value.info.data
} else { } else {
return [] return []
} }
} else { } else {
return [] return []
} }
}) })
async function submit() { async function submit() {
const data: SubmitCodePayload = { const data: SubmitCodePayload = {
problem_id: problem!.value.id, problem_id: problem!.value.id,
language: code.language, language: code.language,
code: code.value, code: code.value,
} }
if (contestID) { if (contestID) {
data.contest_id = parseInt(contestID) data.contest_id = parseInt(contestID)
} }
submission.value = { result: 9 } as Submission submission.value = { result: 9 } as Submission
const res = await submitCode(data) const res = await submitCode(data)
submissionId.value = res.data.submission_id submissionId.value = res.data.submission_id
// 防止重复提交 // 防止重复提交
submitPending() submitPending()
submitted.value = true submitted.value = true
// 查询结果 // 查询结果
fetchSubmission() fetchSubmission()
} }
watch( watch(
() => submission?.value?.result, () => submission?.value?.result,
(result) => { (result) => {
if (result === SubmissionStatus.accepted) { if (result === SubmissionStatus.accepted) {
party.confetti(document.body, { party.confetti(document.body, {
count: party.variation.range(200, 400), count: party.variation.range(200, 400),
size: party.variation.skew(2, 0.3), size: party.variation.skew(2, 0.3),
}) })
} }
} }
) )
defineExpose({ submit }) defineExpose({ submit })
</script> </script>
<template> <template>
<el-tab-pane :disabled="submitDisabled" name="submit"> <el-tab-pane :disabled="submitDisabled" name="submit">
<template #label> <template #label>
<el-space :size="2"> <el-space :size="2">
<el-icon> <el-icon>
<i-ep-loading v-if="judging || pending || submitting" /> <i-ep-loading v-if="judging || pending || submitting" />
<i-ep-bell v-else-if="isPending" /> <i-ep-bell v-else-if="isPending" />
<i-ep-caret-right v-else /> <i-ep-caret-right v-else />
</el-icon> </el-icon>
<span>{{ submitLabel }}</span> <span>{{ submitLabel }}</span>
</el-space> </el-space>
</template> </template>
<div class="panel"> <div class="panel">
<el-alert <el-alert
v-if="submission" v-if="submission"
:closable="false" :closable="false"
:type="(JUDGE_STATUS[submission.result]['alertType'] as any)" :type="JUDGE_STATUS[submission.result]['alertType']"
:title="JUDGE_STATUS[submission.result]['name']" :title="JUDGE_STATUS[submission.result]['name']"
> >
</el-alert> </el-alert>
<el-scrollbar v-if="msg" height="354" class="result"> <el-scrollbar v-if="msg" height="354" class="result">
<div>{{ msg }}</div> <div>{{ msg }}</div>
</el-scrollbar> </el-scrollbar>
<el-table <el-table
v-if="infoTable.length" v-if="infoTable.length"
max-height="354" max-height="354"
:data="infoTable" :data="infoTable"
stripe stripe
> >
<el-table-column prop="test_case" label="测试用例" align="center" /> <el-table-column prop="test_case" label="测试用例" align="center" />
<el-table-column label="测试状态" width="120" align="center"> <el-table-column label="测试状态" width="120" align="center">
<template #default="scope"> <template #default="scope">
<SubmissionResultTag v-if="scope.row" :result="scope.row.result" /> <SubmissionResultTag v-if="scope.row" :result="scope.row.result" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="占用内存" align="center"> <el-table-column label="占用内存" align="center">
<template #default="scope"> <template #default="scope">
{{ submissionMemoryFormat(scope.row.memory) }} {{ submissionMemoryFormat(scope.row.memory) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="执行耗时" align="center"> <el-table-column label="执行耗时" align="center">
<template #default="scope"> <template #default="scope">
{{ submissionTimeFormat(scope.row.real_time) }} {{ submissionTimeFormat(scope.row.real_time) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="signal" label="信号" align="center" /> <el-table-column prop="signal" label="信号" align="center" />
</el-table> </el-table>
</div> </div>
</el-tab-pane> </el-tab-pane>
</template> </template>
<style scoped> <style scoped>
.panel { .panel {
height: 400px; height: 400px;
} }
.result { .result {
margin-top: 12px; margin-top: 12px;
white-space: pre; white-space: pre;
line-height: 1.5; line-height: 1.5;
} }
</style> </style>

View File

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

View File

@@ -1,10 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import Editor from "./components/Editor.vue"
import ProblemContent from "./components/ProblemContent.vue"
import ProblemInfo from "./components/ProblemInfo.vue"
import { getProblem } from "oj/api" import { getProblem } from "oj/api"
import { isDesktop, isMobile } from "~/shared/composables/breakpoints" import { isDesktop, isMobile } from "~/shared/composables/breakpoints"
import { TabsPaneContext } from "element-plus"
const Editor = defineAsyncComponent(() => import("./components/Editor.vue"))
const ProblemContent = defineAsyncComponent(
() => import("./components/ProblemContent.vue")
)
const ProblemInfo = defineAsyncComponent(
() => import("./components/ProblemInfo.vue")
)
interface Props { interface Props {
problemID: string problemID: string

View File

@@ -140,12 +140,12 @@ onMounted(listProblems)
<el-table-column v-if="isDesktop" label="状态" :width="80"> <el-table-column v-if="isDesktop" label="状态" :width="80">
<template #default="scope"> <template #default="scope">
<el-icon <el-icon
v-if="scope.row.status === 'done'" v-if="scope.row.status === 'passed'"
color="var(--el-color-success)" color="var(--el-color-success)"
><i-ep-select ><i-ep-select
/></el-icon> /></el-icon>
<el-icon <el-icon
v-if="scope.row.status === 'tried'" v-if="scope.row.status === 'failed'"
color="var(--el-color-error)" color="var(--el-color-error)"
><i-ep-semi-select ><i-ep-semi-select
/></el-icon> /></el-icon>
@@ -155,10 +155,7 @@ onMounted(listProblems)
<el-table-column prop="title" label="标题" /> <el-table-column prop="title" label="标题" />
<el-table-column label="难度" width="100"> <el-table-column label="难度" width="100">
<template #default="scope"> <template #default="scope">
<el-tag <el-tag disable-transitions :type="getTagColor(scope.row.difficulty)">
disable-transitions
:type="(getTagColor(scope.row.difficulty) as any)"
>
{{ scope.row.difficulty }} {{ scope.row.difficulty }}
</el-tag> </el-tag>
</template> </template>

View File

@@ -1,5 +1,5 @@
<script setup lang="ts"></script> <script setup lang="ts"></script>
<template>status detail</template> <template>status detail</template>
<style scoped></style> <style scoped></style>

View File

@@ -1,16 +1,67 @@
<script setup lang="ts"> <script setup lang="ts">
import Pagination from "~/shared/Pagination/index.vue" import Pagination from "~/shared/Pagination/index.vue"
import { SubmissionListPayload } from "utils/types"
import {
submissionMemoryFormat,
submissionTimeFormat,
parseTime,
} from "utils/functions"
import { listSubmissions } from "oj/api"
import SubmissionResultTag from "oj/components/SubmissionResultTag.vue"
const query = reactive({ const route = useRoute()
const problemID = <string>route.query.problem
const contestID = <string>route.query.contest
const query = reactive<SubmissionListPayload>({
page: 1, page: 1,
limit: 10, limit: 10,
offset: 0,
username: "",
myself: "0",
problem_id: problemID,
contest_id: contestID,
})
const { data, isLoading, isFinished, execute } = listSubmissions(query)
onMounted(() => {
execute()
}) })
const total = ref(100)
</script> </script>
<template> <template>
<el-table max-height="calc(100vh - 171px)"></el-table> <el-table v-if="isFinished" :loading="isLoading" :data="data.results">
<el-table-column label="提交时间" prop="create_time">
<template #default="scope">
{{ parseTime(scope.row.create_time, "YYYY-M-D hh:mm:ss") }}
</template>
</el-table-column>
<el-table-column label="编号">
<template #default="scope">
{{ scope.row.id.slice(0, 12) }}
</template>
</el-table-column>
<el-table-column label="状态" prop="result">
<template #default="scope">
<SubmissionResultTag :result="scope.row.result" />
</template>
</el-table-column>
<el-table-column label="题目" prop="problem"></el-table-column>
<el-table-column label="执行耗时">
<template #default="scope">
{{ submissionTimeFormat(scope.row.statistic_info.time_cost) }}
</template>
</el-table-column>
<el-table-column label="占用内存">
<template #default="scope">
{{ submissionMemoryFormat(scope.row.statistic_info.memory_cost) }}
</template>
</el-table-column>
<el-table-column label="语言" prop="language"></el-table-column>
<el-table-column label="提交者" prop="username"></el-table-column>
</el-table>
<Pagination <Pagination
:total="total" v-if="isFinished"
:total="data.total"
v-model:limit="query.limit" v-model:limit="query.limit"
v-model:page="query.page" v-model:page="query.page"
/> />

View File

@@ -1,10 +1,10 @@
import { Code } from "utils/types" import { Code } from "utils/types"
export const useCodeStore = defineStore("code", () => { export const useCodeStore = defineStore("code", () => {
const code = reactive<Code>({ const code = reactive<Code>({
value: "", value: "",
language: "C", language: "C",
}) })
return { code } return { code }
}) })

View File

@@ -1,54 +1,54 @@
export const routes = [ export const routes = [
{ {
path: "/", path: "/",
component: () => import("~/shared/layout/default.vue"), component: () => import("~/shared/layout/default.vue"),
children: [ children: [
{ path: "", component: () => import("oj/problem/list.vue") }, { path: "", component: () => import("oj/problem/list.vue") },
{ {
path: "problem/:problemID", path: "problem/:problemID",
component: () => import("oj/problem/detail.vue"), component: () => import("oj/problem/detail.vue"),
props: true, props: true,
name: "ProblemDetail", name: "ProblemDetail",
}, },
{ {
path: "status", path: "status",
component: () => import("oj/status/list.vue"), component: () => import("oj/status/list.vue"),
meta: { requiresAuth: true }, meta: { requiresAuth: true },
}, },
{ {
path: "status/:statusID", path: "status/:statusID",
component: () => import("oj/status/detail.vue"), component: () => import("oj/status/detail.vue"),
props: true, props: true,
}, },
{ {
path: "contest", path: "contest",
component: () => import("oj/contest/list.vue"), component: () => import("oj/contest/list.vue"),
meta: { requiresAuth: true }, meta: { requiresAuth: true },
}, },
{ {
path: "contest/:contestID", path: "contest/:contestID",
component: () => import("oj/contest/detail.vue"), component: () => import("oj/contest/detail.vue"),
props: true, props: true,
}, },
{ {
path: "contest/:contestID/problem/:problemID", path: "contest/:contestID/problem/:problemID",
component: () => import("oj/problem/detail.vue"), component: () => import("oj/problem/detail.vue"),
props: true, props: true,
name: "ContestProblemDetail", name: "ContestProblemDetail",
}, },
{ {
path: "rank", path: "rank",
component: () => import("oj/rank/list.vue"), component: () => import("oj/rank/list.vue"),
}, },
{ {
path: "learn", path: "learn",
component: () => import("learn/index.vue"), component: () => import("learn/index.vue"),
}, },
], ],
}, },
{ {
path: "/admin", path: "/admin",
component: () => import("~/shared/layout/admin.vue"), component: () => import("~/shared/layout/admin.vue"),
children: [{ path: "", component: () => import("admin/index.vue") }], children: [{ path: "", component: () => import("admin/index.vue") }],
}, },
] ]

View File

@@ -1,98 +1,98 @@
<script setup lang="ts"> <script setup lang="ts">
import type * as Monaco from "monaco-editor" import type * as Monaco from "monaco-editor"
import { LANGUAGE_VALUE } from "utils/constants" import { LANGUAGE_VALUE } from "utils/constants"
import { LANGUAGE } from "utils/types" import { LANGUAGE } from "utils/types"
import { isMobile } from "~/shared/composables/breakpoints" import { isMobile } from "~/shared/composables/breakpoints"
import { isDark } from "../composables/dark" import { isDark } from "../composables/dark"
interface Props { interface Props {
value: string value: string
language?: LANGUAGE language?: LANGUAGE
height?: string height?: string
fontSize?: number fontSize?: number
class?: string class?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
language: "C", language: "C",
height: "calc(100vh - 100px)", height: "calc(100vh - 100px)",
fontSize: 20, fontSize: 20,
class: "", class: "",
}) })
const emit = defineEmits<{ const emit = defineEmits<{
(e: "change", value: string): void (e: "change", value: string): void
}>() }>()
const monacoEditorRef = ref() const monacoEditorRef = ref()
let editor: Monaco.editor.IStandaloneCodeEditor let editor: Monaco.editor.IStandaloneCodeEditor
onMounted(function () { onMounted(function () {
const model = window.monaco.editor.createModel( const model = window.monaco.editor.createModel(
props.value, props.value,
LANGUAGE_VALUE[props.language] LANGUAGE_VALUE[props.language]
) )
editor = window.monaco.editor.create(monacoEditorRef.value, { editor = window.monaco.editor.create(monacoEditorRef.value, {
model, model,
theme: isDark.value ? "dark" : "light", // 官方自带三种主题vs, hc-black, or vs-dark theme: isDark.value ? "dark" : "light", // 官方自带三种主题vs, hc-black, or vs-dark
minimap: { minimap: {
enabled: false, enabled: false,
}, },
lineNumbersMinChars: 3, lineNumbersMinChars: 3,
automaticLayout: true, // 自适应布局 automaticLayout: true, // 自适应布局
tabSize: 4, tabSize: 4,
fontSize: isMobile.value ? 20 : 24, // 字体大小 fontSize: isMobile.value ? 20 : 24, // 字体大小
scrollBeyondLastLine: false, scrollBeyondLastLine: false,
lineDecorationsWidth: 0, lineDecorationsWidth: 0,
scrollBeyondLastColumn: 0, scrollBeyondLastColumn: 0,
glyphMargin: false, glyphMargin: false,
scrollbar: { scrollbar: {
useShadows: false, useShadows: false,
vertical: "hidden", vertical: "hidden",
horizontal: "hidden", horizontal: "hidden",
}, },
overviewRulerLanes: 0, overviewRulerLanes: 0,
}) })
model.onDidChangeContent(() => { model.onDidChangeContent(() => {
const value = model.getValue().toString() const value = model.getValue().toString()
emit("change", value) emit("change", value)
}) })
editor.onKeyDown((e) => { editor.onKeyDown((e) => {
if ((e.ctrlKey || e.metaKey) && e.code === "KeyS") { if ((e.ctrlKey || e.metaKey) && e.code === "KeyS") {
e.preventDefault() e.preventDefault()
} }
if ((e.ctrlKey || e.metaKey) && e.code === "KeyR") { if ((e.ctrlKey || e.metaKey) && e.code === "KeyR") {
e.preventDefault() e.preventDefault()
} }
}) })
watchEffect(() => { watchEffect(() => {
window.monaco.editor.setModelLanguage(model, LANGUAGE_VALUE[props.language]) window.monaco.editor.setModelLanguage(model, LANGUAGE_VALUE[props.language])
}) })
watchEffect(() => { watchEffect(() => {
if (props.value !== model.getValue()) { if (props.value !== model.getValue()) {
model.setValue(props.value) model.setValue(props.value)
} }
}) })
watchEffect(() => { watchEffect(() => {
window.monaco.editor.setTheme(isDark.value ? "dark" : "light") window.monaco.editor.setTheme(isDark.value ? "dark" : "light")
}) })
}) })
onUnmounted(() => { onUnmounted(() => {
editor && editor.dispose() editor && editor.dispose()
}) })
</script> </script>
<template> <template>
<div <div
ref="monacoEditorRef" ref="monacoEditorRef"
:class="props.class" :class="props.class"
:style="{ height: props.height }" :style="{ height: props.height }"
></div> ></div>
</template> </template>
<style scoped></style> <style scoped></style>

View File

@@ -1,42 +1,42 @@
<script setup lang="ts"> <script setup lang="ts">
import { isDesktop } from "~/shared/composables/breakpoints" import { isDesktop } from "~/shared/composables/breakpoints"
interface Props { interface Props {
total: number total: number
limit: number limit: number
page: number page: number
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
limit: 10, limit: 10,
page: 1, page: 1,
}) })
const emit = defineEmits(["update:limit", "update:page"]) const emit = defineEmits(["update:limit", "update:page"])
const limit = ref(props.limit) const limit = ref(props.limit)
const page = ref(props.page) const page = ref(props.page)
watch(limit, () => emit("update:limit", limit)) watch(limit, () => emit("update:limit", limit))
watch(page, () => emit("update:page", page)) watch(page, () => emit("update:page", page))
</script> </script>
<template> <template>
<el-pagination <el-pagination
class="right margin" class="right margin"
:layout="isDesktop ? 'prev,pager,next,sizes' : 'prev,next,sizes'" :layout="isDesktop ? 'prev,pager,next,sizes' : 'prev,next,sizes'"
background background
:total="props.total" :total="props.total"
:page-sizes="[10, 20, 30]" :page-sizes="[10, 20, 30]"
:pager-count="5" :pager-count="5"
v-model:page-size="limit" v-model:page-size="limit"
v-model:current-page="page" v-model:current-page="page"
/> />
</template> </template>
<style scoped> <style scoped>
.margin { .margin {
margin-top: 24px; margin-top: 24px;
} }
.right { .right {
float: right; float: right;
} }
</style> </style>

View File

@@ -1,46 +1,46 @@
<template> <template>
<div :class="classes"> <div :class="classes">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from "vue" import { computed } from "vue"
interface Props { interface Props {
split: "horizontal" | "vertical" split: "horizontal" | "vertical"
className?: string className?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
split: "horizontal", split: "horizontal",
className: "", className: "",
}) })
const classes = computed(() => [props.split, props.className].join(" ")) const classes = computed(() => [props.split, props.className].join(" "))
</script> </script>
<style scoped> <style scoped>
.splitter-pane.vertical.splitter-paneL { .splitter-pane.vertical.splitter-paneL {
position: absolute; position: absolute;
left: 0px; left: 0px;
height: 100%; height: 100%;
padding-right: 3px; padding-right: 3px;
} }
.splitter-pane.vertical.splitter-paneR { .splitter-pane.vertical.splitter-paneR {
position: absolute; position: absolute;
right: 0px; right: 0px;
height: 100%; height: 100%;
padding-left: 3px; padding-left: 3px;
} }
.splitter-pane.horizontal.splitter-paneL { .splitter-pane.horizontal.splitter-paneL {
position: absolute; position: absolute;
top: 0px; top: 0px;
width: 100%; width: 100%;
} }
.splitter-pane.horizontal.splitter-paneR { .splitter-pane.horizontal.splitter-paneR {
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
width: 100%; width: 100%;
padding-top: 3px; padding-top: 3px;
} }
</style> </style>

View File

@@ -1,47 +1,47 @@
<template> <template>
<div :class="classes"></div> <div :class="classes"></div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from "vue" import { computed } from "vue"
interface Props { interface Props {
split: "horizontal" | "vertical" split: "horizontal" | "vertical"
className?: string className?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
split: "horizontal", split: "horizontal",
className: "", className: "",
}) })
const classes = computed(() => const classes = computed(() =>
["splitter-pane-resizer", props.split, props.className].join(" ") ["splitter-pane-resizer", props.split, props.className].join(" ")
) )
</script> </script>
<style scoped> <style scoped>
.splitter-pane-resizer { .splitter-pane-resizer {
box-sizing: border-box; box-sizing: border-box;
background: #000; background: #000;
position: absolute; position: absolute;
opacity: 0.2; opacity: 0.2;
z-index: 1; z-index: 1;
background-clip: padding-box; background-clip: padding-box;
} }
.splitter-pane-resizer.horizontal { .splitter-pane-resizer.horizontal {
height: 11px; height: 11px;
margin: -5px 0; margin: -5px 0;
border-top: 5px solid rgba(255, 255, 255, 0); border-top: 5px solid rgba(255, 255, 255, 0);
border-bottom: 5px solid rgba(255, 255, 255, 0); border-bottom: 5px solid rgba(255, 255, 255, 0);
cursor: row-resize; cursor: row-resize;
width: 100%; width: 100%;
} }
.splitter-pane-resizer.vertical { .splitter-pane-resizer.vertical {
width: 11px; width: 11px;
height: 100%; height: 100%;
margin-left: -5px; margin-left: -5px;
border-left: 5px solid rgba(255, 255, 255, 0); border-left: 5px solid rgba(255, 255, 255, 0);
border-right: 5px solid rgba(255, 255, 255, 0); border-right: 5px solid rgba(255, 255, 255, 0);
cursor: col-resize; cursor: col-resize;
} }
</style> </style>

View File

@@ -1,141 +1,141 @@
<template> <template>
<div <div
:style="{ cursor, userSelect }" :style="{ cursor, userSelect }"
class="vue-splitter-container clearfix" class="vue-splitter-container clearfix"
@mouseup="onMouseUp" @mouseup="onMouseUp"
@mousemove="onMouseMove" @mousemove="onMouseMove"
> >
<Pane <Pane
class="splitter-pane splitter-paneL" class="splitter-pane splitter-paneL"
:split="split" :split="split"
:style="{ [type]: percent + '%' }" :style="{ [type]: percent + '%' }"
> >
<slot name="panel"></slot> <slot name="panel"></slot>
</Pane> </Pane>
<Resizer <Resizer
:className="className" :className="className"
:style="{ [resizeType]: percent + '%' }" :style="{ [resizeType]: percent + '%' }"
:split="split" :split="split"
@mousedown.native="onMouseDown" @mousedown.native="onMouseDown"
@click.native="onClick" @click.native="onClick"
></Resizer> ></Resizer>
<Pane <Pane
class="splitter-pane splitter-paneR" class="splitter-pane splitter-paneR"
:split="split" :split="split"
:style="{ [type]: 100 - percent + '%' }" :style="{ [type]: 100 - percent + '%' }"
> >
<slot name="paner"></slot> <slot name="paner"></slot>
</Pane> </Pane>
<div class="vue-splitter-container-mask" v-if="active"></div> <div class="vue-splitter-container-mask" v-if="active"></div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Resizer from "./Resizer.vue" import Resizer from "./Resizer.vue"
import Pane from "./Pane.vue" import Pane from "./Pane.vue"
import { computed, ref } from "vue" import { computed, ref } from "vue"
interface Props { interface Props {
minPercent?: number minPercent?: number
defaultPercent?: number defaultPercent?: number
split: "vertical" | "horizontal" split: "vertical" | "horizontal"
className?: string className?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
minPercent: 10, minPercent: 10,
defaultPercent: 50, defaultPercent: 50,
split: "horizontal", split: "horizontal",
className: "", className: "",
}) })
const emit = defineEmits(["resize"]) const emit = defineEmits(["resize"])
const active = ref(false) const active = ref(false)
const hasMoved = ref(false) const hasMoved = ref(false)
const percent = ref(props.defaultPercent) const percent = ref(props.defaultPercent)
const type = ref(props.split === "vertical" ? "width" : "height") const type = ref(props.split === "vertical" ? "width" : "height")
const resizeType = ref(props.split === "vertical" ? "left" : "top") const resizeType = ref(props.split === "vertical" ? "left" : "top")
const userSelect = computed(() => (active.value ? "none" : "auto")) const userSelect = computed(() => (active.value ? "none" : "auto"))
const cursor = computed(() => const cursor = computed(() =>
active.value ? (props.split === "vertical" ? "col-resize" : "row-resize") : "" active.value ? (props.split === "vertical" ? "col-resize" : "row-resize") : ""
) )
// watch( // watch(
// () => defaultPercent, // () => defaultPercent,
// (newValue) => { // (newValue) => {
// percent.value = newValue // percent.value = newValue
// } // }
// ) // )
function onClick() { function onClick() {
if (!hasMoved.value) { if (!hasMoved.value) {
percent.value = 50 percent.value = 50
emit("resize", percent.value) emit("resize", percent.value)
} }
} }
function onMouseDown() { function onMouseDown() {
active.value = true active.value = true
hasMoved.value = false hasMoved.value = false
} }
function onMouseUp() { function onMouseUp() {
active.value = false active.value = false
} }
function onMouseMove(e: any) { function onMouseMove(e: any) {
if (e.buttons === 0) { if (e.buttons === 0) {
active.value = false active.value = false
} }
if (active.value) { if (active.value) {
let offset = 0 let offset = 0
let target = e.currentTarget let target = e.currentTarget
if (props.split === "vertical") { if (props.split === "vertical") {
while (target) { while (target) {
offset += target.offsetLeft offset += target.offsetLeft
target = target.offsetParent target = target.offsetParent
} }
} else { } else {
while (target) { while (target) {
offset += target.offsetTop offset += target.offsetTop
target = target.offsetParent target = target.offsetParent
} }
} }
const currentPage = props.split === "vertical" ? e.pageX : e.pageY const currentPage = props.split === "vertical" ? e.pageX : e.pageY
const targetOffset = const targetOffset =
props.split === "vertical" props.split === "vertical"
? e.currentTarget.offsetWidth ? e.currentTarget.offsetWidth
: e.currentTarget.offsetHeight : e.currentTarget.offsetHeight
const newPercent = const newPercent =
Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100 Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100
if (newPercent > props.minPercent && newPercent < 100 - props.minPercent) { if (newPercent > props.minPercent && newPercent < 100 - props.minPercent) {
percent.value = newPercent percent.value = newPercent
} }
emit("resize", newPercent) emit("resize", newPercent)
hasMoved.value = true hasMoved.value = true
} }
} }
</script> </script>
<style scoped> <style scoped>
.clearfix:after { .clearfix:after {
visibility: hidden; visibility: hidden;
display: block; display: block;
font-size: 0; font-size: 0;
content: " "; content: " ";
clear: both; clear: both;
height: 0; height: 0;
} }
.vue-splitter-container { .vue-splitter-container {
height: 100%; height: 100%;
position: relative; position: relative;
} }
.vue-splitter-container-mask { .vue-splitter-container-mask {
z-index: 9999; z-index: 9999;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
} }
</style> </style>

View File

@@ -1,6 +1,6 @@
import { breakpointsTailwind } from "@vueuse/core" import { breakpointsTailwind } from "@vueuse/core"
const breakpoints = useBreakpoints(breakpointsTailwind) const breakpoints = useBreakpoints(breakpointsTailwind)
export const isMobile = breakpoints.smallerOrEqual("md") export const isMobile = breakpoints.smallerOrEqual("md")
export const isDesktop = breakpoints.greater("md") export const isDesktop = breakpoints.greater("md")

View File

@@ -1,2 +1,2 @@
export const isDark = useDark({ storageKey: "theme-appearance" }) export const isDark = useDark({ storageKey: "theme-appearance" })
export const toggleDark = useToggle(isDark) export const toggleDark = useToggle(isDark)

View File

@@ -1,2 +1,2 @@
export const [loginModal, toggleLogin] = useToggle() export const [loginModal, toggleLogin] = useToggle()
export const [signupModal, toggleSignup] = useToggle() export const [signupModal, toggleSignup] = useToggle()

View File

@@ -1,11 +1,11 @@
<script setup lang="ts"></script> <script setup lang="ts"></script>
<template> <template>
<el-container> <el-container>
<el-main> <el-main>
<router-view></router-view> <router-view></router-view>
</el-main> </el-main>
</el-container> </el-container>
</template> </template>
<style scoped></style> <style scoped></style>

View File

@@ -1,24 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import Login from "../Login/index.vue" import Login from "../Login/index.vue"
import Signup from "../Signup/index.vue" import Signup from "../Signup/index.vue"
import Header from "../Header/index.vue" import Header from "../Header/index.vue"
</script> </script>
<template> <template>
<el-container> <el-container>
<el-header class="header"> <el-header class="header">
<Header /> <Header />
</el-header> </el-header>
<el-main> <el-main>
<router-view></router-view> <router-view></router-view>
</el-main> </el-main>
<Login /> <Login />
<Signup /> <Signup />
</el-container> </el-container>
</template> </template>
<style scoped> <style scoped>
.header { .header {
display: flex; display: flex;
} }
</style> </style>

View File

@@ -1,98 +1,98 @@
<script setup lang="ts"> <script setup lang="ts">
import type * as Monaco from "monaco-editor" import type * as Monaco from "monaco-editor"
import { LANGUAGE_VALUE } from "utils/constants" import { LANGUAGE_VALUE } from "utils/constants"
import { LANGUAGE } from "utils/types" import { LANGUAGE } from "utils/types"
import { isMobile } from "~/shared/composables/breakpoints" import { isMobile } from "~/shared/composables/breakpoints"
import { isDark } from "../composables/dark" import { isDark } from "../composables/dark"
interface Props { interface Props {
value: string value: string
language?: LANGUAGE language?: LANGUAGE
height?: string height?: string
fontSize?: number fontSize?: number
class?: string class?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
language: "C", language: "C",
height: "calc(100vh - 100px)", height: "calc(100vh - 100px)",
fontSize: 20, fontSize: 20,
class: "", class: "",
}) })
const emit = defineEmits<{ const emit = defineEmits<{
(e: "change", value: string): void (e: "change", value: string): void
}>() }>()
const monacoEditorRef = ref() const monacoEditorRef = ref()
let editor: Monaco.editor.IStandaloneCodeEditor let editor: Monaco.editor.IStandaloneCodeEditor
onMounted(function () { onMounted(function () {
const model = window.monaco.editor.createModel( const model = window.monaco.editor.createModel(
props.value, props.value,
LANGUAGE_VALUE[props.language] LANGUAGE_VALUE[props.language]
) )
editor = window.monaco.editor.create(monacoEditorRef.value, { editor = window.monaco.editor.create(monacoEditorRef.value, {
model, model,
theme: isDark.value ? "dark" : "light", // 官方自带三种主题vs, hc-black, or vs-dark theme: isDark.value ? "dark" : "light", // 官方自带三种主题vs, hc-black, or vs-dark
minimap: { minimap: {
enabled: false, enabled: false,
}, },
lineNumbersMinChars: 3, lineNumbersMinChars: 3,
automaticLayout: true, // 自适应布局 automaticLayout: true, // 自适应布局
tabSize: 4, tabSize: 4,
fontSize: isMobile.value ? 20 : 24, // 字体大小 fontSize: isMobile.value ? 20 : 24, // 字体大小
scrollBeyondLastLine: false, scrollBeyondLastLine: false,
lineDecorationsWidth: 0, lineDecorationsWidth: 0,
scrollBeyondLastColumn: 0, scrollBeyondLastColumn: 0,
glyphMargin: false, glyphMargin: false,
scrollbar: { scrollbar: {
useShadows: false, useShadows: false,
vertical: "hidden", vertical: "hidden",
horizontal: "hidden", horizontal: "hidden",
}, },
overviewRulerLanes: 0, overviewRulerLanes: 0,
}) })
model.onDidChangeContent(() => { model.onDidChangeContent(() => {
const value = model.getValue().toString() const value = model.getValue().toString()
emit("change", value) emit("change", value)
}) })
editor.onKeyDown((e) => { editor.onKeyDown((e) => {
if ((e.ctrlKey || e.metaKey) && e.code === "KeyS") { if ((e.ctrlKey || e.metaKey) && e.code === "KeyS") {
e.preventDefault() e.preventDefault()
} }
if ((e.ctrlKey || e.metaKey) && e.code === "KeyR") { if ((e.ctrlKey || e.metaKey) && e.code === "KeyR") {
e.preventDefault() e.preventDefault()
} }
}) })
watchEffect(() => { watchEffect(() => {
window.monaco.editor.setModelLanguage(model, LANGUAGE_VALUE[props.language]) window.monaco.editor.setModelLanguage(model, LANGUAGE_VALUE[props.language])
}) })
watchEffect(() => { watchEffect(() => {
if (props.value !== model.getValue()) { if (props.value !== model.getValue()) {
model.setValue(props.value) model.setValue(props.value)
} }
}) })
watchEffect(() => { watchEffect(() => {
window.monaco.editor.setTheme(isDark.value ? "dark" : "light") window.monaco.editor.setTheme(isDark.value ? "dark" : "light")
}) })
}) })
onUnmounted(() => { onUnmounted(() => {
editor && editor.dispose() editor && editor.dispose()
}) })
</script> </script>
<template> <template>
<div <div
ref="monacoEditorRef" ref="monacoEditorRef"
:class="props.class" :class="props.class"
:style="{ height: props.height }" :style="{ height: props.height }"
></div> ></div>
</template> </template>
<style scoped></style> <style scoped></style>

View File

@@ -1,141 +1,141 @@
<template> <template>
<div <div
:style="{ cursor, userSelect }" :style="{ cursor, userSelect }"
class="vue-splitter-container clearfix" class="vue-splitter-container clearfix"
@mouseup="onMouseUp" @mouseup="onMouseUp"
@mousemove="onMouseMove" @mousemove="onMouseMove"
> >
<Pane <Pane
class="splitter-pane splitter-paneL" class="splitter-pane splitter-paneL"
:split="split" :split="split"
:style="{ [type]: percent + '%' }" :style="{ [type]: percent + '%' }"
> >
<slot name="panel"></slot> <slot name="panel"></slot>
</Pane> </Pane>
<Resizer <Resizer
:className="className" :className="className"
:style="{ [resizeType]: percent + '%' }" :style="{ [resizeType]: percent + '%' }"
:split="split" :split="split"
@mousedown.native="onMouseDown" @mousedown.native="onMouseDown"
@click.native="onClick" @click.native="onClick"
></Resizer> ></Resizer>
<Pane <Pane
class="splitter-pane splitter-paneR" class="splitter-pane splitter-paneR"
:split="split" :split="split"
:style="{ [type]: 100 - percent + '%' }" :style="{ [type]: 100 - percent + '%' }"
> >
<slot name="paner"></slot> <slot name="paner"></slot>
</Pane> </Pane>
<div class="vue-splitter-container-mask" v-if="active"></div> <div class="vue-splitter-container-mask" v-if="active"></div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Resizer from "./Resizer.vue" import Resizer from "./Resizer.vue"
import Pane from "./Pane.vue" import Pane from "./Pane.vue"
import { computed, ref } from "vue" import { computed, ref } from "vue"
interface Props { interface Props {
minPercent?: number minPercent?: number
defaultPercent?: number defaultPercent?: number
split: "vertical" | "horizontal" split: "vertical" | "horizontal"
className?: string className?: string
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
minPercent: 10, minPercent: 10,
defaultPercent: 50, defaultPercent: 50,
split: "horizontal", split: "horizontal",
className: "", className: "",
}) })
const emit = defineEmits(["resize"]) const emit = defineEmits(["resize"])
const active = ref(false) const active = ref(false)
const hasMoved = ref(false) const hasMoved = ref(false)
const percent = ref(props.defaultPercent) const percent = ref(props.defaultPercent)
const type = ref(props.split === "vertical" ? "width" : "height") const type = ref(props.split === "vertical" ? "width" : "height")
const resizeType = ref(props.split === "vertical" ? "left" : "top") const resizeType = ref(props.split === "vertical" ? "left" : "top")
const userSelect = computed(() => (active.value ? "none" : "auto")) const userSelect = computed(() => (active.value ? "none" : "auto"))
const cursor = computed(() => const cursor = computed(() =>
active.value ? (props.split === "vertical" ? "col-resize" : "row-resize") : "" active.value ? (props.split === "vertical" ? "col-resize" : "row-resize") : ""
) )
// watch( // watch(
// () => defaultPercent, // () => defaultPercent,
// (newValue) => { // (newValue) => {
// percent.value = newValue // percent.value = newValue
// } // }
// ) // )
function onClick() { function onClick() {
if (!hasMoved.value) { if (!hasMoved.value) {
percent.value = 50 percent.value = 50
emit("resize", percent.value) emit("resize", percent.value)
} }
} }
function onMouseDown() { function onMouseDown() {
active.value = true active.value = true
hasMoved.value = false hasMoved.value = false
} }
function onMouseUp() { function onMouseUp() {
active.value = false active.value = false
} }
function onMouseMove(e: any) { function onMouseMove(e: any) {
if (e.buttons === 0) { if (e.buttons === 0) {
active.value = false active.value = false
} }
if (active.value) { if (active.value) {
let offset = 0 let offset = 0
let target = e.currentTarget let target = e.currentTarget
if (props.split === "vertical") { if (props.split === "vertical") {
while (target) { while (target) {
offset += target.offsetLeft offset += target.offsetLeft
target = target.offsetParent target = target.offsetParent
} }
} else { } else {
while (target) { while (target) {
offset += target.offsetTop offset += target.offsetTop
target = target.offsetParent target = target.offsetParent
} }
} }
const currentPage = props.split === "vertical" ? e.pageX : e.pageY const currentPage = props.split === "vertical" ? e.pageX : e.pageY
const targetOffset = const targetOffset =
props.split === "vertical" props.split === "vertical"
? e.currentTarget.offsetWidth ? e.currentTarget.offsetWidth
: e.currentTarget.offsetHeight : e.currentTarget.offsetHeight
const newPercent = const newPercent =
Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100 Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100
if (newPercent > props.minPercent && newPercent < 100 - props.minPercent) { if (newPercent > props.minPercent && newPercent < 100 - props.minPercent) {
percent.value = newPercent percent.value = newPercent
} }
emit("resize", newPercent) emit("resize", newPercent)
hasMoved.value = true hasMoved.value = true
} }
} }
</script> </script>
<style scoped> <style scoped>
.clearfix:after { .clearfix:after {
visibility: hidden; visibility: hidden;
display: block; display: block;
font-size: 0; font-size: 0;
content: " "; content: " ";
clear: both; clear: both;
height: 0; height: 0;
} }
.vue-splitter-container { .vue-splitter-container {
height: 100%; height: 100%;
position: relative; position: relative;
} }
.vue-splitter-container-mask { .vue-splitter-container-mask {
z-index: 9999; z-index: 9999;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
} }
</style> </style>

33
src/shims.d.ts vendored
View File

@@ -1,15 +1,18 @@
import type * as Monaco from "monaco-editor" declare module "element-plus/dist/locale/zh-cn.mjs"
declare module "element-plus/dist/locale/zh-cn.mjs" declare module "*.md" {
import type { ComponentOptions } from "vue"
declare module "*.md" { const Component: ComponentOptions
import type { ComponentOptions } from "vue" export default Component
const Component: ComponentOptions }
export default Component
} declare global {
let monaco: Monaco
declare global { interface Window {
interface Window { monaco: Monaco
monaco: Monaco }
} }
}
interface Window {
monaco: Monaco
}

View File

@@ -1,55 +1,55 @@
import axios from "axios" import axios from "axios"
import { DEAD_RESULTS } from "./constants" import { DEAD_RESULTS } from "./constants"
import { Code } from "./types" import { Code } from "./types"
const http = axios.create({ baseURL: "https://judge0api.hyyz.izhai.net" }) const http = axios.create({ baseURL: "https://judge0api.hyyz.izhai.net" })
function encode(str: string) { function encode(str: string) {
return btoa(unescape(encodeURIComponent(str ?? ""))) return btoa(unescape(encodeURIComponent(str ?? "")))
} }
function decode(bytes: string) { function decode(bytes: string) {
let escaped = escape(atob(bytes ?? "")) let escaped = escape(atob(bytes ?? ""))
try { try {
return decodeURIComponent(escaped) return decodeURIComponent(escaped)
} catch (e) { } catch (e) {
return unescape(escaped) return unescape(escaped)
} }
} }
export async function createTestSubmission(code: Code, input: string) { export async function createTestSubmission(code: Code, input: string) {
const encodedCode = encode(code.value) const encodedCode = encode(code.value)
if (encodedCode === DEAD_RESULTS[code.language].encoded) { if (encodedCode === DEAD_RESULTS[code.language].encoded) {
return DEAD_RESULTS[code.language].result return DEAD_RESULTS[code.language].result
} else { } else {
const id = { const id = {
C: 50, C: 50,
"C++": 54, "C++": 54,
Java: 62, Java: 62,
Golang: 60, Golang: 60,
JavaScript: 63, JavaScript: 63,
Python2: 70, Python2: 70,
Python3: 71, Python3: 71,
}[code.language] }[code.language]
let compilerOptions = "" let compilerOptions = ""
if (id === 50) compilerOptions = "-lm" // 解决 GCC 的链接问题 if (id === 50) compilerOptions = "-lm" // 解决 GCC 的链接问题
const payload = { const payload = {
source_code: encodedCode, source_code: encodedCode,
language_id: id, language_id: id,
stdin: encode(input), stdin: encode(input),
redirect_stderr_to_stdout: true, redirect_stderr_to_stdout: true,
compiler_options: compilerOptions, compiler_options: compilerOptions,
} }
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(),
} }
} }
} }

View File

@@ -1,102 +1,115 @@
export type LANGUAGE = export type LANGUAGE =
| "C" | "C"
| "C++" | "C++"
| "Python2" | "Python2"
| "Python3" | "Python3"
| "Java" | "Java"
| "JavaScript" | "JavaScript"
| "Golang" | "Golang"
export type SUBMISSION_RESULT = -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 export type SUBMISSION_RESULT = -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
export interface Problem { export type ProblemStatus = "passed" | "failed" | "not_test"
_id: string
id: number export interface Problem {
tags: string[] _id: string
created_by: { id: number
id: number tags: string[]
username: string created_by: {
real_name: null id: number
} username: string
template: { [key in LANGUAGE]?: string } real_name: null
title: string }
description: string template: { [key in LANGUAGE]?: string }
input_description: string title: string
output_description: string description: string
samples: { input_description: string
input: string output_description: string
output: string samples: {
}[] input: string
hint: string output: string
languages: Array<LANGUAGE> }[]
create_time: Date hint: string
last_update_time: null languages: Array<LANGUAGE>
time_limit: number create_time: Date
memory_limit: number last_update_time: null
io_mode: { time_limit: number
input: string memory_limit: number
output: string io_mode: {
io_mode: string input: string
} output: string
spj: boolean io_mode: string
spj_language: null }
rule_type: string spj: boolean
difficulty: "Low" | "Mid" | "High" spj_language: null
source: string rule_type: string
total_score: number difficulty: "Low" | "Mid" | "High"
submission_number: number source: string
accepted_number: number total_score: number
statistic_info: {} submission_number: number
share_submission: boolean accepted_number: number
contest: null statistic_info: {}
my_status: number share_submission: boolean
} contest: null
my_status: number
export interface Code { }
language: LANGUAGE
value: string export interface Code {
} language: LANGUAGE
value: string
export interface SubmitCodePayload { }
problem_id: number
language: LANGUAGE export interface SubmitCodePayload {
code: string problem_id: number
contest_id?: number language: LANGUAGE
} code: string
contest_id?: number
interface Info { }
err: string | null
data: { interface Info {
error: number err: string | null
memory: number data: {
output: null error: number
result: SUBMISSION_RESULT memory: number
signal: number output: null
cpu_time: number result: SUBMISSION_RESULT
exit_code: number signal: number
real_time: number cpu_time: number
test_case: string exit_code: number
output_md5: string real_time: number
}[] test_case: string
} output_md5: string
}[]
export interface Submission { }
id: string
create_time: Date export interface Submission {
user_id: number id: string
username: string create_time: Date
code: string user_id: number
result: SUBMISSION_RESULT username: string
info: Info code: string
language: string result: SUBMISSION_RESULT
shared: boolean info: Info
statistic_info: { language: string
score: number shared: boolean
err_info: string statistic_info: {
} score: number
ip: string err_info: string
// TODO: 这里不知道是什么 }
contest: null ip: string
problem: number // TODO: 这里不知道是什么
can_unshare: boolean contest: null
} problem: number
can_unshare: boolean
}
export interface SubmissionListPayload {
myself?: "1" | "0"
result?: SUBMISSION_RESULT
username?: string
contest_id?: string
problem_id?: string
page: number
limit: number
offset: number
}