添加挑战

src/components/Challenge.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="container" v-if="taskTab === TASK_TYPE.Challenge">
+    <n-empty>暂无挑战，敬请期待</n-empty>
+  </div>
+</template>
+<script setup lang="ts">
+import { taskTab } from "../store/task"
+import { TASK_TYPE } from "../utils/const"
+</script>
+<style scoped>
+.container {
+  padding: 16px;
+}
+</style>

src/components/Corner.vue

@@ -1,6 +1,8 @@
 <template>
   <n-flex align="center" class="corner">
-    <n-button quaternary v-if="!show" @click="showTutorial">教程</n-button>
+    <n-button quaternary v-if="!show" @click="showTutorial">
+      打开{{ TASK_LABEL[taskTab] }}
+    </n-button>
     <template v-if="user.loaded && authed">
       <n-button
         quaternary
@@ -38,12 +40,12 @@ import { Icon } from "@iconify/vue"
 import { authed, roleNormal, roleSuper, user } from "../store/user"
 import { loginModal } from "../store/modal"
 import { show, tutorialSize, step } from "../store/tutorial"
-import { taskId } from "../store/task"
+import { taskId, taskTab } from "../store/task"
 import { html, css, js } from "../store/editors"
 import { Account, Submission } from "../api"
 import { Role } from "../utils/type"
 import { router } from "../router"
-import { ADMIN_URL } from "../utils/const"
+import { ADMIN_URL, TASK_LABEL } from "../utils/const"
 
 const message = useMessage()
 

src/components/Task.vue

@@ -3,7 +3,13 @@
     <n-flex align="center" justify="space-between" class="title">
       <n-flex align="center">
         <Icon icon="twemoji:open-book" :width="20"></Icon>
-        <n-tabs style="width: 140px" type="segment" animated>
+        <n-tabs
+          style="width: 140px"
+          type="segment"
+          animated
+          :value="taskTab"
+          @update:value="changeTab"
+        >
           <n-tab name="tutorial" tab="教程"></n-tab>
           <n-tab name="challenge" tab="挑战"></n-tab>
         </n-tabs>
@@ -20,7 +26,12 @@
         <n-button
           text
           v-if="authed && roleSuper"
-          @click="$router.push({ name: 'tutorial', params: { display: step } })"
+          @click="
+            $router.push({
+              name: taskTab,
+              params: taskTab === TASK_TYPE.Tutorial ? { display: step } : {},
+            })
+          "
         >
           <Icon :width="16" icon="lucide:edit"></Icon>
         </n-button>
@@ -29,7 +40,13 @@
         </n-button>
       </n-flex>
     </n-flex>
-    <div class="markdown-body" v-html="content" ref="$content"></div>
+    <div
+      v-if="taskTab === TASK_TYPE.Tutorial"
+      class="markdown-body"
+      v-html="content"
+      ref="$content"
+    />
+    <Challenge v-else />
   </div>
 </template>
 <script lang="ts" setup>
@@ -41,46 +58,65 @@ import { css, html, js, tab } from "../store/editors"
 import { Tutorial } from "../api"
 import { step } from "../store/tutorial"
 import { authed, roleSuper } from "../store/user"
-import { useStorage } from "@vueuse/core"
-import { STORAGE_KEY } from "../utils/const"
-import { taskId } from "../store/task"
+import { taskId, taskTab } from "../store/task"
+import { useRoute, useRouter } from "vue-router"
+import { TASK_TYPE } from "../utils/const"
+import Challenge from "./Challenge.vue"
 
-const displays = ref<number[]>([])
-const content = useStorage(STORAGE_KEY.CONTENT, "")
+const route = useRoute()
+const router = useRouter()
+const tutorialIds = ref<number[]>([])
+const content = ref("")
 const $content = useTemplateRef<any>("$content")
 
 defineEmits(["hide"])
 
-const hideNav = computed(() => displays.value.length <= 1)
+const hideNav = computed(
+  () => taskTab.value === TASK_TYPE.Challenge || tutorialIds.value.length <= 1,
+)
+
+function changeTab(v: TASK_TYPE) {
+  taskTab.value = v
+  const query = { task: v } as any
+  if (v === TASK_TYPE.Tutorial) query.step = step.value
+  router.push({ query })
+}
 
 const prevDisabled = computed(() => {
-  const i = displays.value.indexOf(step.value)
+  const i = tutorialIds.value.indexOf(step.value)
   return i <= 0
 })
 
 const nextDisabled = computed(() => {
-  const i = displays.value.indexOf(step.value)
-  return i === displays.value.length - 1
+  const i = tutorialIds.value.indexOf(step.value)
+  return i === tutorialIds.value.length - 1
 })
 
 function prev() {
-  const i = displays.value.indexOf(step.value)
-  step.value = displays.value[i - 1]
+  const i = tutorialIds.value.indexOf(step.value)
+  step.value = tutorialIds.value[i - 1]
+  router.push({ query: { task: taskTab.value, step: step.value } })
 }
 
 function next() {
-  const i = displays.value.indexOf(step.value)
-  step.value = displays.value[i + 1]
+  const i = tutorialIds.value.indexOf(step.value)
+  step.value = tutorialIds.value[i + 1]
+  router.push({ query: { task: taskTab.value, step: step.value } })
 }
 
 async function getContent() {
-  displays.value = await Tutorial.listDisplay()
-  if (!displays.value.length) {
+  tutorialIds.value = await Tutorial.listDisplay()
+  if (!tutorialIds.value.length) {
     content.value = "暂无教程"
     return
   }
-  if (!displays.value.includes(step.value)) {
-    step.value = displays.value[0]
+  if (route.query.step) {
+    step.value = Number(route.query.step)
+  } else {
+    step.value = 1
+  }
+  if (!tutorialIds.value.includes(step.value)) {
+    step.value = tutorialIds.value[0]
   }
   const data = await Tutorial.get(step.value)
   taskId.value = data.task_ptr
@@ -136,14 +172,15 @@ function modifyLink() {
   }
 }
 
-async function render() {
+async function init() {
+  taskTab.value = route.query.task as TASK_TYPE
   await getContent()
   addButton()
   modifyLink()
 }
 
-onMounted(render)
-watch(step, render)
+onMounted(init)
+watch(step, init)
 </script>
 <style scoped>
 .container {

src/components/submissions/NameWithFilter.vue

@@ -0,0 +1 @@
+<template></template>

src/components/submissions/TaskTitle.vue

@@ -16,15 +16,25 @@
     >
       挑战
     </n-tag>
-    <n-button text>{{ props.submission.task_title }}</n-button>
+    <n-button text @click="open">{{ props.submission.task_title }}</n-button>
   </n-flex>
 </template>
 <script setup lang="ts">
+import { useRouter } from "vue-router"
 import type { SubmissionOut } from "../../utils/type"
+import { submission } from "../../store/submission"
 
 interface Props {
   submission: SubmissionOut
 }
 
 const props = defineProps<Props>()
+
+const router = useRouter()
+function open() {
+  router.push({
+    name: "home",
+    query: { [submission.value.task_type]: submission.value.task_id },
+  })
+}
 </script>

src/pages/Challenge.vue

@@ -0,0 +1 @@
+<template>Dashboard Challenge</template>

src/pages/Dashboard.vue

@@ -1,9 +1,7 @@
 <template>
   <n-flex class="container" :wrap="false">
     <n-flex vertical class="menu">
-      <n-button secondary @click="$router.push({ name: 'home' })">
-        返回
-      </n-button>
+      <n-button secondary @click="goHome"> 返回 </n-button>
       <n-button
         v-for="item in menu"
         :key="item.label"
@@ -19,16 +17,31 @@
   </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"
+
+const router = useRouter()
 
 const menu = [
   {
     label: "教程",
     route: { name: "tutorial", params: { display: step.value } },
   },
+  { label: "挑战", route: { name: "challenge" } },
   { 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/Home.vue

@@ -6,7 +6,7 @@
     max="900px"
   >
     <template #1>
-      <Tutorial @hide="hide" />
+      <Task @hide="hide" />
     </template>
     <template #2>
       <n-split direction="vertical" min="200px">
@@ -24,7 +24,7 @@
 import { useMagicKeys, whenever } from "@vueuse/core"
 import Editors from "../components/Editors.vue"
 import Preview from "../components/Preview.vue"
-import Tutorial from "../components/Tutorial.vue"
+import Task from "../components/Task.vue"
 import { show, tutorialSize } from "../store/tutorial"
 import { html, css, js } from "../store/editors"
 

src/pages/Submissions.vue

@@ -179,6 +179,7 @@ onUnmounted(() => {
     id: "",
     userid: 0,
     username: "",
+    task_id: 0,
     task_title: "",
     task_type: "tutorial",
     score: 0,

src/router.ts

@@ -15,7 +15,7 @@ const routes = [
     path: "/submission/:id",
     name: "submission",
     component: () => import("./pages/Submission.vue"),
-    props: true
+    props: true,
   },
   {
     path: "/dashboard",
@@ -26,7 +26,12 @@ const routes = [
       {
         path: "tutorial/:display",
         name: "tutorial",
-        component: () => import("./pages/Markdown.vue"),
+        component: () => import("./pages/Tutorial.vue"),
+      },
+      {
+        path: "challenge",
+        name: "challenge",
+        component: () => import("./pages/Challenge.vue"),
       },
       {
         path: "user-manage/:page",

src/store/submission.ts

@@ -5,6 +5,7 @@ export const submission = ref<SubmissionAll>({
   id: "",
   userid: 0,
   username: "",
+  task_id: 0,
   task_title: "",
   task_type: "tutorial",
   score: 0.0,

src/store/task.ts

@@ -1,3 +1,5 @@
 import { ref } from "vue"
+import { TASK_TYPE } from "../utils/const"
 
+export const taskTab = ref(TASK_TYPE.Tutorial)
 export const taskId = ref(0)

src/store/tutorial.ts

@@ -1,8 +1,6 @@
 import { ref } from "vue"
-import { useStorage } from "@vueuse/core"
-import { STORAGE_KEY } from "../utils/const"
 
-export const step = useStorage(STORAGE_KEY.STEP, 1)
+export const step = ref(1)
 
 export const show = ref(true)
 export const tutorialSize = ref(2 / 5)

src/utils/const.ts

@@ -28,8 +28,6 @@ export const alertVariants = [
 
 export const STORAGE_KEY = {
   LOGIN: "web-isloggedin",
-  STEP: "web-turtorial-step",
-  CONTENT: "web-turtorial-content",
   HTML: "web-html",
   CSS: "web-css",
   JS: "web-js",
@@ -46,3 +44,13 @@ export const BASE_URL =
   import.meta.env.MODE === "development"
     ? "http://localhost:8000/api"
     : "https://web.xuyue.cc/api"
+
+export enum TASK_TYPE {
+  Tutorial = "tutorial",
+  Challenge = "challenge",
+}
+
+export const TASK_LABEL = {
+  [TASK_TYPE.Tutorial]: "教程",
+  [TASK_TYPE.Challenge]: "挑战",
+} as const

src/utils/type.ts

@@ -53,6 +53,7 @@ export interface SubmissionAll {
   id: string
   userid: number
   username: string
+  task_id: number
   task_type: string
   task_title: string
   score: number