✨ Challenge Submit

application/pages/challenges/[id].vue

@@ -12,17 +12,52 @@
         </n-page-header>
       </template>
 
-      <section>
+      <div id="answering-content" v-if="challenge?.status === 'in-progress'">
         <problem-solution-program
           v-if="problem.type === 'programming'"
           v-model:answers="answers"
           :challenge="challenge"
           :problem="problem"
         />
-      </section>
+      </div>
+
+      <div id="preview-challenge" class="flex flex-col gap-4" v-else>
+        <div>
+          <div class="font-bold">状态</div>
+          <div class="case-capital">{{ challenge?.status?.replaceAll("-", " ") }}</div>
+        </div>
+        <div>
+          <div class="font-bold">问题</div>
+          <div>
+            <nuxt-link target="_blank" :to="`/problems/${challenge.problem}`">
+              #{{ challenge?.problem }} | {{ problem?.title }}
+            </nuxt-link>
+          </div>
+        </div>
+        <div>
+          <div class="font-bold">答案</div>
+          <client-only>
+            <div class="mt-2 mx-[-4px]">
+              <problem-preview-program
+                v-if="problem.type === 'programming'"
+                :answers="answers"
+                :challenge="challenge"
+                :problem="problem"
+              />
+            </div>
+          </client-only>
+        </div>
+        <div>
+          <div class="font-bold">结果</div>
+          <n-card embedded class="mt-2 mx-[-4px]">
+            <div v-if="challenge?.details?.cases"></div>
+            <n-empty v-else description="未进行判题，暂无挑战结果" />
+          </n-card>
+        </div>
+      </div>
 
       <template #action>
-        <div class="w-full flex justify-between">
+        <div v-if="challenge?.status === 'in-progress'" id="answering-widgets" class="w-full flex justify-between">
           <div class="flex gap-2">
             <n-button secondary circle class="rounded-[4px]" type="warning" :disabled="submitting" @click="save">
               <template #icon>
@@ -41,7 +76,7 @@
 </template>
 
 <script setup lang="ts">
-import { NButton, NCard, NPageHeader, NTag, NIcon, useDialog, useMessage } from "naive-ui";
+import { NButton, NCard, NPageHeader, NTag, NIcon, NEmpty, useDialog, useMessage } from "naive-ui";
 import { Save } from "@vicons/carbon";
 
 const route = useRoute();
@@ -124,6 +159,36 @@ function abandon() {
 }
 
 async function submit() {
+  await save();
 
+  const instance = dialog.warning({
+    title: "警告",
+    content: "你确定要提交吗？确认提交后无法再次修改答案，等待判题可能需要一段时间。",
+    positiveText: "确定",
+    negativeText: "不确定",
+    onPositiveClick: async () => {
+      instance.loading = true;
+
+      const inst = message.loading("正在提交中，请稍后……");
+
+      const { error } = await client
+        .from("challenges")
+        // @ts-ignore
+        .update<any>({ status: "submitted" })
+        .eq("id", challenge.id);
+
+      if (error != null) {
+        message.error(`Something went wrong... ${error.message}`);
+      }
+
+      inst.destroy();
+      message.success("提交成功！即将跳转结果页面……");
+
+      const delay = (ms: number) => new Promise(res => setTimeout(res, ms));
+
+      await delay(1850);
+      reloadNuxtApp();
+    }
+  });
 }
 </script>