code panel for submission list

src/oj/submission/components/SubmissionLink.vue

@@ -0,0 +1,33 @@
+<template>
+  <n-flex v-if="props.submission.show_link" align="center">
+    <n-button text type="info" @click="$emit('showCode')">
+      {{ props.submission.id.slice(0, 12) }}
+    </n-button>
+    <n-button text @click="goto">
+      <template #icon>
+        <n-icon color="#aaa">
+          <Code />
+        </n-icon>
+      </template>
+    </n-button>
+  </n-flex>
+  <span v-else>
+    {{ props.submission.id.slice(0, 12) }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import Code from "~/shared/icons/Code.vue"
+import { Submission } from "~/utils/types"
+
+interface Props {
+  submission: Submission
+}
+const router = useRouter()
+const props = defineProps<Props>()
+defineEmits(["showCode"])
+
+function goto() {
+  router.push("/submission/" + props.submission.id)
+}
+</script>

src/oj/submission/detail.vue

@@ -12,6 +12,7 @@ import SubmissionResultTag from "~/shared/components/SubmissionResultTag.vue"
 
 const props = defineProps<{
   submissionID: string
+  hideList: boolean
 }>()
 
 const submission = ref<Submission>()
@@ -75,7 +76,7 @@ onMounted(init)
       {{ copied ? "成功复制" : "复制代码" }}
     </n-button>
     <n-data-table
-      v-if="submission.info && submission.info.data"
+      v-if="!hideList && submission.info && submission.info.data"
       :columns="columns"
       :data="submission.info.data"
     />

src/oj/submission/list.vue

@@ -15,6 +15,8 @@ import { useUserStore } from "~/shared/store/user"
 import { LANGUAGE_SHOW_VALUE } from "~/utils/constants"
 import ButtonWithSearch from "./components/ButtonWithSearch.vue"
 import StatisticsPanel from "./components/StatisticsPanel.vue"
+import SubmissionLink from "./components/SubmissionLink.vue"
+import SubmissionDetail from "./detail.vue"
 
 interface Query {
   username: string
@@ -40,7 +42,9 @@ const query = reactive<Query>({
   myself: route.query.myself === "1",
   problem: <string>route.query.problem ?? "",
 })
-const [show, toggleStatisticPanel] = useToggle(false)
+const submissionID = ref("")
+const [statisticPanel, toggleStatisticPanel] = useToggle(false)
+const [codePanel, toggleCodePanel] = useToggle(false)
 
 const options: SelectOption[] = [
   { label: "全部", value: "" },
@@ -115,6 +119,11 @@ function problemClicked(row: Submission) {
   }
 }
 
+function showCodePanel(id: string) {
+  toggleCodePanel(true)
+  submissionID.value = id
+}
+
 watch(() => query.page, routerPush)
 
 watch(
@@ -159,32 +168,22 @@ const columns = computed(() => {
       title: "提交编号",
       key: "id",
       minWidth: 160,
-      render: (row) => {
+      render: (row) =>
-        if (row.show_link) {
+        h(SubmissionLink, {
-          return h(
+          submission: row,
-            NButton,
+          onShowCode: () => showCodePanel(row.id),
-            {
+        }),
-              text: true,
-              type: "info",
-              onClick: () => router.push("/submission/" + row.id),
-            },
-            () => row.id.slice(0, 12),
-          )
-        } else {
-          return row.id.slice(0, 12)
-        }
-      },
     },
     {
       title: "状态",
       key: "status",
-      width: 120,
+      width: 160,
       render: (row) => h(SubmissionResultTag, { result: row.result }),
     },
     {
       title: "题目",
       key: "problem",
-      width: 120,
+      width: 160,
       render: (row) =>
         h(
           ButtonWithSearch,
@@ -216,7 +215,7 @@ const columns = computed(() => {
     {
       title: "用户",
       key: "username",
-      minWidth: 150,
+      minWidth: 160,
       render: (row) =>
         h(
           ButtonWithSearch,
@@ -298,7 +297,7 @@ const columns = computed(() => {
   />
   <n-modal
     v-if="userStore.isSuperAdmin"
-    v-model:show="show"
+    v-model:show="statisticPanel"
     preset="card"
     :style="{ maxWidth: isDesktop && '70vw', maxHeight: '80vh' }"
     :content-style="{ overflow: 'auto' }"
@@ -306,9 +305,23 @@ const columns = computed(() => {
   >
     <StatisticsPanel :problem="query.problem" :username="query.username" />
   </n-modal>
+  <n-modal
+    v-model:show="codePanel"
+    preset="card"
+    :style="{ maxWidth: isDesktop && '70vw', maxHeight: '80vh' }"
+    :content-style="{ overflow: 'auto' }"
+    title="代码详情"
+  >
+    <SubmissionDetail :submissionID="submissionID" hideList />
+  </n-modal>
 </template>
 <style scoped>
 .select {
   width: 120px;
 }
+
+.code {
+  font-size: 20px;
+  overflow: auto;
+}
 </style>

src/shared/icons/Code.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="m8 18l-6-6l6-6l1.425 1.425l-4.6 4.6L9.4 16.6zm8 0l-1.425-1.425l4.6-4.6L14.6 7.4L16 6l6 6z"
+    ></path>
+  </svg>
+</template>

vite.config.ts

@@ -7,7 +7,7 @@ import Components from "unplugin-vue-components/vite"
 import { NaiveUiResolver } from "unplugin-vue-components/resolvers"
 
 const dev = false
-const url = dev ? "https://ojtest.hyyz.izhai.net" : "https://oj.xuyue.cc"
+const url = dev ? "http://localhost:8080" : "https://oj.xuyue.cc"
 const proxyConfig = {
   target: url,
   changeOrigin: true,