add submissions.
This commit is contained in:
@@ -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
1
src/components.d.ts
vendored
@@ -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']
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
<template>loading...</template>
|
<template>loading...</template>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
# 我的是第一步骤
|
# 我的是第一步骤
|
||||||
|
|
||||||
```c
|
```c
|
||||||
#include<stdio.h>
|
#include<stdio.h>
|
||||||
|
|
||||||
int main() {
|
int main() {
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -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)
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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" />
|
<img class="logo" :src="`/${item}.svg`" alt="logo" />
|
||||||
<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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -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 }
|
||||||
})
|
})
|
||||||
|
|||||||
108
src/routes.ts
108
src/routes.ts
@@ -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") }],
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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")
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
@@ -1,2 +1,2 @@
|
|||||||
export const [loginModal, toggleLogin] = useToggle()
|
export const [loginModal, toggleLogin] = useToggle()
|
||||||
export const [signupModal, toggleSignup] = useToggle()
|
export const [signupModal, toggleSignup] = useToggle()
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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
33
src/shims.d.ts
vendored
@@ -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
|
||||||
|
}
|
||||||
|
|||||||
@@ -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(),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user