xuyue/ojnext
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

delete all element-plus related.

Browse Source
This commit is contained in:
yuetsh
2023-01-18 21:06:50 +08:00
parent 947111247e
commit 5763f6dea2
20 changed files with 405 additions and 631 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/oj/problem/components/Editor.vue
View File

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

484
src/oj/problem/components/SubmitPanel.vue → src/oj/problem/components/Panel.vue
View File

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

87
src/oj/problem/components/ProblemContent.vue
View File

@@ -6,6 +6,7 @@ import { SOURCES } from "utils/constants"
import { Problem, ProblemStatus } from "utils/types"
import { createTestSubmission } from "utils/judge"
import { submissionExists } from "oj/api"
import { useThemeVars } from "naive-ui"
interface Props {
problem: Problem
@@ -20,6 +21,8 @@ type Sample = Problem["samples"][number] & {
const props = defineProps<Props>()
const route = useRoute()
const contestID = <string>route.params.contestID
const theme = useThemeVars()
const style = computed(() => "color: " + theme.value.primaryColor)
const { data: hasSolved, execute } = submissionExists(props.problem.id)
if (contestID) {
execute()
@@ -68,86 +71,88 @@ async function test(sample: Sample, index: number) {
})
}
const icon = (status: Sample["status"]) =>
const icon = (status: ProblemStatus) =>
({
not_test: Flag,
failed: CloseBold,
passed: Select,
}[status])
const type = (status: Sample["status"]) =>
const type = (status: ProblemStatus) =>
({
not_test: "warning",
failed: "danger",
failed: "error",
passed: "success",
}[status])
}[status] as "warning" | "error" | "success")
</script>
<template>
<el-alert
<n-alert
v-if="problem.my_status === 0 || (contestID && hasSolved)"
type="success"
:closable="false"
center
title="🎉 本 题 已 经 被 你 解 决 啦"
>
</el-alert>
/>
<h1>{{ problem.title }}</h1>
<p class="title">描述</p>
<p class="title" :style="style">描述</p>
<div class="content" v-html="problem.description"></div>
<p class="title">输入</p>
<p class="title" :style="style">输入</p>
<div class="content" v-html="problem.input_description"></div>
<p class="title">输出</p>
<p class="title" :style="style">输出</p>
<div class="content" v-html="problem.output_description"></div>
<div v-if="problem.hint">
<p class="title">提示</p>
<el-card shadow="never">
<div class="content" v-html="problem.hint"></div>
</el-card>
<p class="title" :style="style">提示</p>
<div class="content" v-html="problem.hint"></div>
</div>
<div v-for="(sample, index) of samples" :key="index">
<el-space>
<p class="title testcaseTitle">测试用例 {{ index + 1 }}</p>
<el-button
:icon="icon(sample.status)"
<n-space align="center">
<p class="title testcaseTitle" :style="style">测试用例 {{ index + 1 }}</p>
<n-button
:type="type(sample.status)"
:disabled="disabled"
:loading="sample.loading"
circle
@click="test(sample, index)"
></el-button>
</el-space>
<el-descriptions border direction="vertical" :column="2">
<el-descriptions-item width="50%">
>
<template #icon>
<component :is="icon(sample.status)"></component>
</template>
</n-button>
</n-space>
<n-descriptions
bordered
:column="2"
label-style="width: 50%; min-width: 100px"
>
<n-descriptions-item>
<template #label>
<el-space>
<n-space>
<span>输入</span>
<el-icon @click="copy(sample.input)"><CopyDocument /> </el-icon>
</el-space>
<n-icon @click="copy(sample.input)"><CopyDocument /></n-icon>
</n-space>
</template>
<div class="testcase">{{ sample.input }}</div>
</el-descriptions-item>
<el-descriptions-item width="50%">
</n-descriptions-item>
<n-descriptions-item>
<template #label>
<el-space>
<n-space>
<span>输出</span>
<el-icon @click="copy(sample.output)"><CopyDocument /> </el-icon>
</el-space>
<n-icon @click="copy(sample.output)"><CopyDocument /></n-icon>
</n-space>
</template>
<div class="testcase">{{ sample.output }}</div>
</el-descriptions-item>
<el-descriptions-item label="运行结果" v-if="sample.status === 'failed'">
</n-descriptions-item>
<n-descriptions-item label="运行结果" v-if="sample.status === 'failed'">
<div class="testcase">{{ sample.msg }}</div>
</el-descriptions-item>
</el-descriptions>
</n-descriptions-item>
</n-descriptions>
</div>
<div v-if="problem.source">
<p class="title">来源</p>
<p class="title" :style="style">来源</p>
<div class="content" v-html="problem.source"></div>
</div>
</template>
@@ -156,7 +161,6 @@ const type = (status: Sample["status"]) =>
.title {
font-size: 20px;
margin: 24px 0 16px 0;
color: var(--el-color-primary);
}
.testcaseTitle {
@@ -164,15 +168,12 @@ const type = (status: Sample["status"]) =>
}
.content {
font-size: 16px;
line-height: 2;
}
.label {
display: flex;
align-items: center;
}
.testcase {
font-size: 14px;
white-space: pre;
}
</style>

68
src/oj/problem/components/ProblemInfo.vue
View File

@@ -11,50 +11,42 @@ defineProps<Props>()
</script>
<template>
<el-descriptions border :column="isDesktop ? 3 : 1">
<el-descriptions-item label="编号">
<n-descriptions bordered label-placement="left" :column="isDesktop ? 3 : 1">
<n-descriptions-item label="编号">
{{ problem._id }}
</el-descriptions-item>
<el-descriptions-item label="出题人">
</n-descriptions-item>
<n-descriptions-item label="出题人">
{{ problem.created_by.username }}
</el-descriptions-item>
<el-descriptions-item label="创建时间">
</n-descriptions-item>
<n-descriptions-item label="创建时间">
{{ parseTime(problem.create_time) }}
</el-descriptions-item>
<el-descriptions-item label="时间限制">
{{ problem.time_limit }}毫秒
</el-descriptions-item>
<el-descriptions-item label="内存限制">
{{ problem.memory_limit }}MB
</el-descriptions-item>
<el-descriptions-item label="难度">
<el-tag disable-transitions :type="getTagColor(problem.difficulty)">
</n-descriptions-item>
<n-descriptions-item label="难度">
<n-tag :type="getTagColor(problem.difficulty)">
{{ DIFFICULTY[problem.difficulty] }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="提交正确">
</n-tag>
</n-descriptions-item>
<n-descriptions-item label="时间限制">
{{ problem.time_limit }}毫秒
</n-descriptions-item>
<n-descriptions-item label="内存限制">
{{ problem.memory_limit }}MB
</n-descriptions-item>
<n-descriptions-item label="提交正确">
{{ problem.accepted_number }}次
</el-descriptions-item>
<el-descriptions-item label="提交错误">
</n-descriptions-item>
<n-descriptions-item label="提交错误">
{{ problem.submission_number - problem.accepted_number }}次
</el-descriptions-item>
<el-descriptions-item label="正确率">
</n-descriptions-item>
<n-descriptions-item label="正确率">
{{ getACRate(problem.accepted_number, problem.submission_number) }}
</el-descriptions-item>
<el-descriptions-item :span="3" label="标签">
<el-space>
<el-tag
disable-transitions
type="info"
v-for="tag in problem.tags"
:key="tag"
>
</n-descriptions-item>
<n-descriptions-item :span="3" label="标签">
<n-space>
<n-tag type="info" v-for="tag in problem.tags" :key="tag">
{{ tag }}
</el-tag>
</el-space>
</el-descriptions-item>
</el-descriptions>
</n-tag>
</n-space>
</n-descriptions-item>
</n-descriptions>
</template>

40
src/oj/problem/components/TestcasePanel.vue
View File

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

41
src/oj/problem/detail.vue
View File

@@ -3,6 +3,7 @@ import { getProblem } from "oj/api"
import { isDesktop, isMobile } from "~/shared/composables/breakpoints"
const Editor = defineAsyncComponent(() => import("./components/Editor.vue"))
const Panel = defineAsyncComponent(() => import("./components/Panel.vue"))
const ProblemContent = defineAsyncComponent(
() => import("./components/ProblemContent.vue")
)
@@ -24,28 +25,34 @@ provide("problem", readonly(problem))
</script>
<template>
<el-row v-if="isFinished && problem" :gutter="20">
<el-col :span="isDesktop ? 12 : 24">
<el-tabs type="border-card">
<el-tab-pane label="题目描述">
<el-scrollbar v-if="isDesktop" height="calc(100vh - 171px)">
<n-grid v-if="isFinished && problem" x-gap="16" :cols="2">
<n-gi :span="isDesktop ? 1 : 2">
<n-tabs default-value="content">
<n-tab-pane name="content" tab="题目描述">
<n-scrollbar v-if="isDesktop" style="max-height: calc(100vh - 136px)">
<ProblemContent :problem="problem" />
</el-scrollbar>
</n-scrollbar>
<ProblemContent v-else :problem="problem" />
</el-tab-pane>
<el-tab-pane v-if="isMobile" label="代码编辑" lazy>
</n-tab-pane>
<n-tab-pane v-if="isMobile" name="editor" tab="代码编辑">
<Editor :problem="problem" />
</el-tab-pane>
<el-tab-pane label="比赛信息" v-if="props.contestID" lazy></el-tab-pane>
<el-tab-pane label="题目信息" lazy>
<Panel />
</n-tab-pane>
<n-tab-pane
name="contest"
tab="比赛信息"
v-if="props.contestID"
></n-tab-pane>
<n-tab-pane name="info" tab="题目信息">
<ProblemInfo :problem="problem" />
</el-tab-pane>
</el-tabs>
</el-col>
<el-col v-if="isDesktop" :span="12">
</n-tab-pane>
</n-tabs>
</n-gi>
<n-gi v-if="isDesktop">
<Editor :problem="problem" />
</el-col>
</el-row>
<Panel />
</n-gi>
</n-grid>
</template>
<style scoped></style>

1
src/oj/problem/list.vue
View File

@@ -184,6 +184,7 @@ function rowProps(row: ProblemFiltered) {
</n-form-item>
<n-form-item>
<n-space>
<n-button @click="search(query.keyword)">搜索</n-button>
<n-button @click="clear">重置</n-button>
<n-button @click="getRandom">随机一题</n-button>
</n-space>