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

use composables.

Browse Source
This commit is contained in:
yuetsh
2023-04-17 11:24:35 +08:00
parent 46d3dcb171
commit 3ff7749395
8 changed files with 130 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,11 @@
<script setup lang="ts">
import Copy from "~/shared/Copy.vue"
import { code } from "oj/composables/code"
import { problem } from "oj/composables/problem"
import { Problem, ProblemStatus } from "utils/types"
import { createTestSubmission } from "utils/judge"
import { useThemeVars } from "naive-ui"
interface Props {
problem: Problem
}
type Sample = Problem["samples"][number] & {
id: number
msg: string
@@ -15,12 +13,11 @@ type Sample = Problem["samples"][number] & {
loading: boolean
}
const props = defineProps<Props>()
const theme = useThemeVars()
const style = computed(() => "color: " + theme.value.primaryColor)
const samples = ref<Sample[]>(
props.problem.samples.map((sample, index) => ({
problem.value!.samples.map((sample, index) => ({
...sample,
id: index,
msg: "",
@@ -90,74 +87,76 @@ function type(status: ProblemStatus) {
</script>
<template>
<n-alert
class="success"
v-if="problem.my_status === 0"
type="success"
title="🎉 本 题 已 经 被 你 解 决 啦"
/>
<div v-if="problem">
<n-alert
class="success"
v-if="problem.my_status === 0"
type="success"
title="🎉 本 题 已 经 被 你 解 决 啦"
/>
<n-space align="center">
<n-tag>{{ problem._id }}</n-tag>
<h1 class="problemTitle">{{ problem.title }}</h1>
</n-space>
<p class="title" :style="style">描述</p>
<div class="content" v-html="problem.description"></div>
<p class="title" :style="style">输入</p>
<div class="content" v-html="problem.input_description"></div>
<p class="title" :style="style">输出</p>
<div class="content" v-html="problem.output_description"></div>
<div v-if="problem.hint">
<p class="title" :style="style">提示</p>
<div class="content" v-html="problem.hint"></div>
</div>
<div v-for="(sample, index) of samples" :key="index">
<n-space align="center">
<p class="title testcaseTitle" :style="style">测试用例 {{ index + 1 }}</p>
<n-button
size="small"
:type="type(sample.status)"
@click="test(sample, index)"
>
{{ label(sample.status, sample.loading) }}
</n-button>
<n-tag>{{ problem._id }}</n-tag>
<h2 class="problemTitle">{{ problem.title }}</h2>
</n-space>
<n-descriptions
bordered
:column="2"
label-style="width: 50%; min-width: 100px"
>
<n-descriptions-item>
<template #label>
<n-space>
<span>输入</span>
<Copy :value="sample.input" />
</n-space>
</template>
<div class="testcase">{{ sample.input }}</div>
</n-descriptions-item>
<n-descriptions-item>
<template #label>
<n-space>
<span>输出</span>
<Copy :value="sample.output" />
</n-space>
</template>
<div class="testcase">{{ sample.output }}</div>
</n-descriptions-item>
<n-descriptions-item label="运行结果" v-if="sample.msg">
<div class="testcase">{{ sample.msg }}</div>
</n-descriptions-item>
</n-descriptions>
</div>
<p class="title" :style="style">描述</p>
<div class="content" v-html="problem.description"></div>
<div v-if="problem.source">
<p class="title" :style="style">来源</p>
<div class="content" v-html="problem.source"></div>
<p class="title" :style="style">输入</p>
<div class="content" v-html="problem.input_description"></div>
<p class="title" :style="style">输出</p>
<div class="content" v-html="problem.output_description"></div>
<div v-if="problem.hint">
<p class="title" :style="style">提示</p>
<div class="content" v-html="problem.hint"></div>
</div>
<div v-for="(sample, index) of samples" :key="index">
<n-space align="center">
<p class="title" :style="style">测试用例 {{ index + 1 }}</p>
<n-button
size="small"
:type="type(sample.status)"
@click="test(sample, index)"
>
{{ label(sample.status, sample.loading) }}
</n-button>
</n-space>
<n-descriptions
bordered
:column="2"
label-style="width: 50%; min-width: 100px"
>
<n-descriptions-item>
<template #label>
<n-space>
<span>输入</span>
<Copy :value="sample.input" />
</n-space>
</template>
<div class="testcase">{{ sample.input }}</div>
</n-descriptions-item>
<n-descriptions-item>
<template #label>
<n-space>
<span>输出</span>
<Copy :value="sample.output" />
</n-space>
</template>
<div class="testcase">{{ sample.output }}</div>
</n-descriptions-item>
<n-descriptions-item label="运行结果" v-if="sample.msg">
<div class="testcase">{{ sample.msg }}</div>
</n-descriptions-item>
</n-descriptions>
</div>
<div v-if="problem.source">
<p class="title" :style="style">来源</p>
<div class="content" v-html="problem.source"></div>
</div>
</div>
</template>
@@ -167,14 +166,10 @@ function type(status: ProblemStatus) {
}
.title {
font-size: 20px;
font-size: 16px;
margin: 12px 0;
}
.testcaseTitle {
margin-bottom: 24px;
}
.content {
font-size: 16px;
line-height: 2;