✨ Problems

application/app.vue

@@ -1,6 +1,7 @@
 <template>
   <n-message-provider>
     <nuxt-layout>
+      <nuxt-loading-indicator />
       <nuxt-page />
     </nuxt-layout>
   </n-message-provider>

application/assets/css/index.css

@@ -13,3 +13,11 @@ body {
   margin: 0;
   padding: 0;
 }
+
+code, pre {
+  font-family: "IBM Plex Mono", monospace;
+}
+
+pre {
+  border-radius: 4px;
+}

application/components/problems/list.vue

@@ -6,7 +6,7 @@
         <div class="text-xs font-normal">每天进步一点点！</div>
       </template>
       <n-list clickable hoverable>
-        <n-list-item v-for="item in (problems as any[])" class="px-[24px]">
+        <n-list-item v-for="item in problems" class="px-[24px]" @click="jump(item)">
           <n-thing :title="item?.title">
             <template #description>
               <div class="text-xs flex gap-2">
@@ -26,5 +26,9 @@ import { NCard, NList, NListItem, NThing, NTag } from "naive-ui";
 
 const client = useSupabaseClient();
 
-const { data: problems } = await client.from("problems").select(`*`).limit(20);
+const { data: problems } = await client.from("problems").select<any, any>("*").limit(20);
+
+function jump(item: any) {
+  navigateTo(`/problems/${item.id}`)
+}
 </script>

application/nuxt.config.ts

@@ -1,24 +1,22 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ["@unocss/nuxt", '@pinia/nuxt', '@nuxtjs/supabase'],
+  modules: ["@unocss/nuxt", "@pinia/nuxt", "@nuxtjs/supabase", "@nuxtjs/mdc"],
+  app: {
+    head: {
+      title: "Fuxi Programming",
+      titleTemplate: "%s | Fuxi",
+    },
+  },
   build: {
     transpile:
-      process.env.NODE_ENV === 'production'
-        ? [
-            'naive-ui',
-            'vueuc',
-            '@css-render/vue3-ssr',
-            '@juggle/resize-observer'
-          ]
-        : ['@juggle/resize-observer']
+      process.env.NODE_ENV === "production"
+        ? ["naive-ui", "vueuc", "@css-render/vue3-ssr", "@juggle/resize-observer"]
+        : ["@juggle/resize-observer"],
   },
   vite: {
     optimizeDeps: {
-      include:
-        process.env.NODE_ENV === 'development'
-          ? ['naive-ui', 'vueuc', 'date-fns-tz/formatInTimeZone']
-          : []
-    }
-  }
-})
+      include: process.env.NODE_ENV === "development" ? ["naive-ui", "vueuc", "date-fns-tz/formatInTimeZone"] : [],
+    },
+  },
+});

application/package.json

@@ -23,6 +23,8 @@
   },
   "dependencies": {
     "@ibm/plex": "^6.3.0",
-    "@supabase/supabase-js": "^2.39.0"
+    "@nuxtjs/mdc": "^0.2.8",
+    "@supabase/supabase-js": "^2.39.0",
+    "prismjs": "^1.29.0"
   }
 }

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>