跳转到首页

src/components/submissions/TaskTitle.vue

@@ -22,7 +22,7 @@
 <script setup lang="ts">
 import { useRouter } from "vue-router"
 import type { SubmissionOut } from "../../utils/type"
-import { submission } from "../../store/submission"
+import { goHome } from "../../utils/helper"
 
 interface Props {
   submission: SubmissionOut
@@ -32,9 +32,6 @@ const props = defineProps<Props>()
 
 const router = useRouter()
 function open() {
-  router.push({
+  goHome(router, props.submission.task_type, props.submission.task_display)
-    name: "home",
-    query: { [submission.value.task_type]: submission.value.task_id },
-  })
 }
 </script>

src/pages/Dashboard.vue

@@ -1,7 +1,9 @@
 <template>
   <n-flex class="container" :wrap="false">
     <n-flex vertical class="menu">
-      <n-button secondary @click="goHome">返回</n-button>
+      <n-button secondary @click="() => goHome($router, taskTab, step)">
+        返回
+      </n-button>
       <n-button
         v-for="item in menu"
         :key="item.label"
@@ -17,12 +19,9 @@
   </n-flex>
 </template>
 <script lang="ts" setup>
-import { useRouter } from "vue-router"
 import { taskTab } from "../store/task"
 import { step } from "../store/tutorial"
-import { TASK_TYPE } from "../utils/const"
+import { goHome } from "../utils/helper"
-
-const router = useRouter()
 
 const menu = [
   {
@@ -33,15 +32,6 @@ const menu = [
   { label: "用户", route: { name: "user-manage", params: { page: 1 } } },
   { label: "提交", route: { name: "submissions", params: { page: 1 } } },
 ]
-
-function goHome() {
-  const query = { task: taskTab.value } as any
-  if (taskTab.value === TASK_TYPE.Tutorial) query.step = step.value
-  router.push({
-    name: "home",
-    query,
-  })
-}
 </script>
 <style scoped>
 .container {

src/pages/Submissions.vue

@@ -3,7 +3,9 @@
     <n-gi :span="1">
       <n-flex vertical>
         <n-flex justify="space-between">
-          <n-button quaternary @click="goHome">返回首页</n-button>
+          <n-button quaternary @click="() => goHome($router, taskTab, step)">
+            返回首页
+          </n-button>
           <n-flex align="center">
             <div>
               <n-input
@@ -36,23 +38,24 @@
       />
     </n-gi>
   </n-grid>
-  <n-modal
+  <n-modal preset="card" v-model:show="codeModal" style="max-width: 60%">
-    preset="card"
+    <template #header>
-    title="前端代码"
+      <n-flex align="center">
-    v-model:show="codeModal"
+        <span>前端代码</span>
-    style="max-width: 80%"
+        <n-button tertiary @click="copyToEditor">复制到编辑框</n-button>
-  >
+      </n-flex>
-    <n-grid x-gap="20" :cols="codeCount">
+    </template>
-      <n-gi :span="1" v-if="html">
+    <n-tabs animated type="segment">
+      <n-tab-pane name="html" tab="html">
         <n-code :code="html" language="html" word-wrap></n-code>
-      </n-gi>
+      </n-tab-pane>
-      <n-gi :span="1" v-if="css">
+      <n-tab-pane name="css" tab="css">
         <n-code :code="css" language="css" word-wrap></n-code>
-      </n-gi>
+      </n-tab-pane>
-      <n-gi :span="1" v-if="js">
+      <n-tab-pane v-if="!!js" name="js" tab="js">
         <n-code :code="js" language="js" word-wrap></n-code>
-      </n-gi>
+      </n-tab-pane>
-    </n-grid>
+    </n-tabs>
   </n-modal>
 </template>
 <script setup lang="ts">
@@ -68,7 +71,9 @@ import { useRouter, useRoute } from "vue-router"
 import { watchDebounced } from "@vueuse/core"
 import { taskTab } from "../store/task"
 import { step } from "../store/tutorial"
+import { html as eHtml, css as eCss, js as eJs } from "../store/editors"
 import { TASK_TYPE } from "../utils/const"
+import { goHome } from "../utils/helper"
 
 const route = useRoute()
 const router = useRouter()
@@ -84,10 +89,6 @@ const html = computed(() => submission.value.html)
 const css = computed(() => submission.value.css)
 const js = computed(() => submission.value.js)
 
-const codeCount = computed(
-  () => [html.value, css.value, js.value].filter((c) => !!c).length,
-)
-
 const codeModal = ref(false)
 
 const columns: DataTableColumn<SubmissionOut>[] = [
@@ -159,13 +160,11 @@ function afterScore() {
   })
 }
 
-function goHome() {
+function copyToEditor() {
-  const query = { task: taskTab.value } as any
+  eHtml.value = html.value
-  if (taskTab.value === TASK_TYPE.Tutorial) query.step = step.value
+  eCss.value = css.value
-  router.push({
+  eJs.value = js.value
-    name: "home",
+  goHome(router, submission.value.task_type, submission.value.task_display)
-    query,
-  })
 }
 
 watch(
@@ -190,8 +189,9 @@ onUnmounted(() => {
     userid: 0,
     username: "",
     task_id: 0,
+    task_display: 0,
     task_title: "",
-    task_type: "tutorial",
+    task_type: TASK_TYPE.Tutorial,
     score: 0,
     my_score: 0,
     html: "",

src/store/submission.ts

@@ -1,13 +1,15 @@
 import { ref } from "vue"
 import type { SubmissionAll } from "../utils/type"
+import { TASK_TYPE } from "../utils/const"
 
 export const submission = ref<SubmissionAll>({
   id: "",
   userid: 0,
   username: "",
   task_id: 0,
+  task_display: 0, // 这是序号
   task_title: "",
-  task_type: "tutorial",
+  task_type: TASK_TYPE.Tutorial,
   score: 0.0,
   my_score: 0,
   html: "",

src/store/task.ts

@@ -2,7 +2,7 @@ import { ref } from "vue"
 import { TASK_TYPE } from "../utils/const"
 
 const urlParams = new URLSearchParams(window.location.search)
-const currentTask = urlParams.get("task") ?? TASK_TYPE.Tutorial
+const currentTask = (urlParams.get("task") as TASK_TYPE) ?? TASK_TYPE.Tutorial
 
 export const taskTab = ref(currentTask)
 export const taskId = ref(0)

src/utils/helper.ts

@@ -1,6 +1,15 @@
 import { useDateFormat } from "@vueuse/core"
+import { TASK_TYPE } from "./const"
 
 export function parseTime(utc: Date | string, format = "YYYY年M月D日") {
   const time = useDateFormat(utc, format, { locales: "zh-CN" })
   return time.value
 }
+
+export function goHome(router: any, type: TASK_TYPE, step: number) {
+  const query = { type } as any
+  if (type === TASK_TYPE.Tutorial) {
+    query.step = step
+  }
+  router.push({ name: "home", query })
+}

src/utils/type.ts

@@ -1,3 +1,5 @@
+import type { TASK_TYPE } from "./const"
+
 export enum Role {
   Super = "super",
   Admin = "admin",
@@ -41,7 +43,8 @@ export interface SubmissionOut {
   id: string
   userid: number
   username: string
-  task_type: string
+  task_display: number
+  task_type: TASK_TYPE
   task_title: string
   score: number
   my_score: number
@@ -54,7 +57,8 @@ export interface SubmissionAll {
   userid: number
   username: string
   task_id: number
-  task_type: string
+  task_display: number
+  task_type: TASK_TYPE
   task_title: string
   score: number
   my_score: number