添加提交详情页

2025-04-26 19:59:15 +08:00
parent b1fcecb9d4
commit ea1b114dd2
4 changed files with 89 additions and 7 deletions
--- a/src/pages/Submission.vue
+++ b/src/pages/Submission.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { onMounted, defineProps, useTemplateRef } from "vue"
+import { Submission } from "../api"
+import type { SubmissionAll } from "../utils/type"
+
+interface Props {
+  id: string
+}
+const props = defineProps<Props>()
+
+const iframe = useTemplateRef<HTMLIFrameElement>("iframe")
+
+async function init() {
+  const submission: SubmissionAll = await Submission.get(props.id)
+
+  if (!iframe.value) return
+  const doc = iframe.value.contentDocument
+  if (doc) {
+    doc.open()
+    doc.write(`<!DOCTYPE html>
+<html lang="zh-Hans-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>预览</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>${submission.css}</style>
+    <link rel="stylesheet" href="/normalize.min.css" />
+    <script src="/jquery.min.js"><\/script>
+  </head>
+  <body>
+    ${submission.html}
+    <script type="module">${submission.js}<\/script>
+  </body>
+</html>`)
+    doc.close()
+  }
+}
+
+onMounted(init)
+</script>
+<template>
+  <iframe class="iframe" ref="iframe"></iframe>
+</template>
+<style scoped>
+.iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+}
+</style>
--- a/src/pages/Submissions.vue
+++ b/src/pages/Submissions.vue
@@ -32,6 +32,7 @@
        :html="html"
        :css="css"
        :js="js"
+        :submission-id="submission.id"
        @after-score="afterScore"
        @show-code="codeModal = true"
      />
@@ -128,7 +129,11 @@ const columns: DataTableColumn<SubmissionOut>[] = [
    render: (row) =>
      h(
        NButton,
-        { quaternary: true, onClick: () => getSubmissionByID(row.id) },
+        {
+          quaternary: submission.value.id !== row.id,
+          type: submission.value.id === row.id ? "primary" : "default",
+          onClick: () => getSubmissionByID(row.id),
+        },
        () => "查看",
      ),
  },
@@ -190,5 +195,6 @@ onUnmounted(() => {
 .container {
  padding: 10px;
  box-sizing: border-box;
+  height: calc(100% - 43px);
 }
 </style>