✨ Problems

application/pages/problems/[id].vue

@@ -0,0 +1,52 @@
+<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>