53 lines
1.8 KiB
Vue
53 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<div class="md:max-w-[720px] mx-auto">
|
||
|
|
<n-card segmented>
|
||
|
|
<template #header>
|
||
|
|
<n-page-header @back="navigateTo('/')">
|
||
|
|
<template #title>{{ problem?.title }}</template>
|
||
|
|
<template #subtitle>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<n-tag size="small" class="case-capital">{{ problem?.type }}</n-tag>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</n-page-header>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<m-d-c :value="problem?.description" class="problem-description" tag="article" />
|
||
|
|
|
||
|
|
<n-divider class="mx-[-24px] w-[calc(100%+48px)]" />
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<div v-if="example" class="grid gap-4 -md:gird-cols-1 md:grid-cols-2">
|
||
|
|
<div>
|
||
|
|
<div>Example Input</div>
|
||
|
|
<pre class="language-text" v-if="example?.spec?.stdin">{{ example?.spec?.stdin }}</pre>
|
||
|
|
<pre class="language-text font-italic" v-else>本题无输入</pre>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div>Example Output</div>
|
||
|
|
<pre class="language-text" v-if="example?.answer?.stdout">{{ example?.answer?.stdout }}</pre>
|
||
|
|
<pre class="language-text font-italic" v-else>本题无输出</pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<n-empty v-else description="本题无公开样例" />
|
||
|
|
</section>
|
||
|
|
</n-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { NCard, NTag, NPageHeader, NDivider, NEmpty } from "naive-ui";
|
||
|
|
import "prismjs/themes/prism.css";
|
||
|
|
import "prismjs/prism";
|
||
|
|
|
||
|
|
const client = useSupabaseClient();
|
||
|
|
const route = useRoute();
|
||
|
|
|
||
|
|
const { data: problem } = await client.from("problems").select<any, any>("*").eq("id", route.params.id).single();
|
||
|
|
const { data: example } = await client
|
||
|
|
.from("problem_cases")
|
||
|
|
.select<any, any>("*")
|
||
|
|
.eq("problem", route.params.id)
|
||
|
|
.single();
|
||
|
|
</script>
|