refactor: move task components to components/task/

src/components/task/ChallengeList.vue

@@ -28,10 +28,10 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue"
 import { useRouter } from "vue-router"
-import { Challenge } from "../api"
+import { Challenge } from "../../api"
-import { taskTab } from "../store/task"
+import { taskTab } from "../../store/task"
-import { TASK_TYPE } from "../utils/const"
+import { TASK_TYPE } from "../../utils/const"
-import type { ChallengeSlim } from "../utils/type"
+import type { ChallengeSlim } from "../../utils/type"
 
 const router = useRouter()
 const challenges = ref<ChallengeSlim[]>([])

src/components/task/TaskPanel.vue

@@ -49,37 +49,39 @@
         </n-button>
       </n-flex>
     </n-flex>
-    <Tutorial v-if="taskTab === TASK_TYPE.Tutorial" />
+    <TutorialContent v-if="taskTab === TASK_TYPE.Tutorial" />
-    <Challenge v-else />
+    <ChallengeList v-else />
   </div>
   <TaskStatsModal v-model:show="statsModal" :task-id="taskId" />
 </template>
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
-import { computed, ref } from "vue"
+import { computed, ref, watch } from "vue"
-import { step, tutorialIds, prev, next, prevDisabled, nextDisabled } from "../store/tutorial"
+import { step, tutorialIds, prev, next, prevDisabled, nextDisabled } from "../../store/tutorial"
-import { authed, roleSuper } from "../store/user"
+import { authed, roleSuper } from "../../store/user"
-import { taskTab, taskId, challengeDisplay } from "../store/task"
+import { taskTab, taskId, challengeDisplay } from "../../store/task"
 import { useRoute, useRouter } from "vue-router"
-import { TASK_TYPE } from "../utils/const"
+import { TASK_TYPE } from "../../utils/const"
-import Challenge from "./Challenge.vue"
+import ChallengeList from "./ChallengeList.vue"
-import Tutorial from "./Tutorial.vue"
+import TutorialContent from "./TutorialContent.vue"
 import TaskStatsModal from "./TaskStatsModal.vue"
 
 const route = useRoute()
 const router = useRouter()
 const statsModal = ref(false)
 
-// 路由同步：在 setup 阶段立即执行，不等 onMounted
+// 路由同步：初始执行 + watch 响应 SPA 内部导航
-const routeName = route.name as string
+function syncRoute(routeName: string) {
-if (routeName.startsWith("home-tutorial")) {
+  if (routeName.startsWith("home-tutorial")) {
-  taskTab.value = TASK_TYPE.Tutorial
+    taskTab.value = TASK_TYPE.Tutorial
-  if (route.params.display) step.value = Number(route.params.display)
+    if (route.params.display) step.value = Number(route.params.display)
-} else if (routeName.startsWith("home-challenge")) {
+  } else if (routeName.startsWith("home-challenge")) {
-  taskTab.value = TASK_TYPE.Challenge
+    taskTab.value = TASK_TYPE.Challenge
-  if (route.params.display)
+    if (route.params.display) challengeDisplay.value = Number(route.params.display)
-    challengeDisplay.value = Number(route.params.display)
+  }
 }
+syncRoute(route.name as string)
+watch(() => route.name as string, syncRoute)
 
 defineEmits(["hide"])
 
@@ -105,7 +107,6 @@ function changeTab(v: TASK_TYPE) {
         : { name: "home-tutorial-list" },
     )
   } else if (v === TASK_TYPE.Challenge) {
-    challengeDisplay.value = 0
     router.push({ name: "home-challenge-list" })
   }
 }

src/components/task/TaskStatsModal.vue

@@ -392,8 +392,8 @@
 import { ref, computed, watch } from "vue"
 import { Icon } from "@iconify/vue"
 import { useRouter } from "vue-router"
-import { Submission } from "../api"
+import { Submission } from "../../api"
-import type { TaskStatsOut } from "../utils/type"
+import type { TaskStatsOut } from "../../utils/type"
 
 const props = defineProps<{ taskId: number; show: boolean }>()
 const emit = defineEmits<{ (e: "update:show", v: boolean): void }>()

src/components/task/TutorialContent.vue

@@ -5,10 +5,10 @@
 import { onMounted, ref, useTemplateRef, watch } from "vue"
 import { marked } from "marked"
 import copyFn from "copy-text-to-clipboard"
-import { css, html, js, tab } from "../store/editors"
+import { css, html, js, tab } from "../../store/editors"
-import { Tutorial } from "../api"
+import { Tutorial } from "../../api"
-import { step, tutorialIds } from "../store/tutorial"
+import { step, tutorialIds } from "../../store/tutorial"
-import { taskId } from "../store/task"
+import { taskId } from "../../store/task"
 import { useRouter } from "vue-router"
 
 marked.use({

src/pages/Home.vue

@@ -6,7 +6,7 @@
     max="900px"
   >
     <template #1>
-      <Task @hide="hide" />
+      <TaskPanel @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/editor/Editors.vue"
 import Preview from "../components/editor/Preview.vue"
-import Task from "../components/Task.vue"
+import TaskPanel from "../components/task/TaskPanel.vue"
 import { show, panelSize } from "../store/panel"
 import { html, css, js } from "../store/editors"
 

src/store/task.ts

@@ -1,4 +1,5 @@
 import { ref } from "vue"
+import { useStorage } from "@vueuse/core"
 import { TASK_TYPE } from "../utils/const"
 
 const currentTask = window.location.pathname.startsWith("/challenge")
@@ -7,4 +8,4 @@ const currentTask = window.location.pathname.startsWith("/challenge")
 
 export const taskTab = ref(currentTask)
 export const taskId = ref(0)
-export const challengeDisplay = ref(0)
+export const challengeDisplay = useStorage("challenge-display", 0)

src/store/tutorial.ts

@@ -1,9 +1,7 @@
+import { useStorage } from "@vueuse/core"
 import { ref } from "vue"
 
-const urlParams = new URLSearchParams(window.location.search)
+export const step = useStorage("tutorial-step", 1)
-const currentStep = urlParams.get("step") ?? "1"
-
-export const step = ref(Number(currentStep))
 export const tutorialIds = ref<number[]>([])
 
 export function prevDisabled(): boolean {

src/utils/helper.ts

@@ -10,7 +10,8 @@ export function goHome(router: any, type: TASK_TYPE, display: number) {
   if (type === TASK_TYPE.Tutorial) {
     router.push({ name: "home-tutorial", params: { display } })
   } else if (type === TASK_TYPE.Challenge) {
-    router.push({ name: "home-challenge", params: { display } })
+    if (display) router.push({ name: "home-challenge", params: { display } })
+    else router.push({ name: "home-challenge-list" })
   } else {
     router.push({ name: "home" })
   }