From 6fb3bc01984fee649880cade2565bbe4ee0526ad Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Wed, 1 Apr 2026 03:55:01 -0600
Subject: [PATCH] refactor: move task components to components/task/

---
 .../{Challenge.vue => task/ChallengeList.vue} |  8 ++--
 .../{Task.vue => task/TaskPanel.vue}          | 39 ++++++++++---------
 src/components/{ => task}/TaskStatsModal.vue  |  4 +-
 .../TutorialContent.vue}                      |  8 ++--
 src/pages/Home.vue                            |  4 +-
 src/store/task.ts                             |  3 +-
 src/store/tutorial.ts                         |  6 +--
 src/utils/helper.ts                           |  3 +-
 8 files changed, 38 insertions(+), 37 deletions(-)
 rename src/components/{Challenge.vue => task/ChallengeList.vue} (90%)
 rename src/components/{Task.vue => task/TaskPanel.vue} (78%)
 rename src/components/{ => task}/TaskStatsModal.vue (99%)
 rename src/components/{Tutorial.vue => task/TutorialContent.vue} (95%)

diff --git a/src/components/Challenge.vue b/src/components/task/ChallengeList.vue
similarity index 90%
rename from src/components/Challenge.vue
rename to src/components/task/ChallengeList.vue
index 9efd655..7864907 100644
--- a/src/components/Challenge.vue
+++ b/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 { taskTab } from "../store/task"
-import { TASK_TYPE } from "../utils/const"
-import type { ChallengeSlim } from "../utils/type"
+import { Challenge } from "../../api"
+import { taskTab } from "../../store/task"
+import { TASK_TYPE } from "../../utils/const"
+import type { ChallengeSlim } from "../../utils/type"
 
 const router = useRouter()
 const challenges = ref<ChallengeSlim[]>([])
diff --git a/src/components/Task.vue b/src/components/task/TaskPanel.vue
similarity index 78%
rename from src/components/Task.vue
rename to src/components/task/TaskPanel.vue
index 20c71b0..ab0b5a0 100644
--- a/src/components/Task.vue
+++ b/src/components/task/TaskPanel.vue
@@ -49,37 +49,39 @@
         </n-button>
       </n-flex>
     </n-flex>
-    <Tutorial v-if="taskTab === TASK_TYPE.Tutorial" />
-    <Challenge v-else />
+    <TutorialContent v-if="taskTab === TASK_TYPE.Tutorial" />
+    <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 { step, tutorialIds, prev, next, prevDisabled, nextDisabled } from "../store/tutorial"
-import { authed, roleSuper } from "../store/user"
-import { taskTab, taskId, challengeDisplay } from "../store/task"
+import { computed, ref, watch } from "vue"
+import { step, tutorialIds, prev, next, prevDisabled, nextDisabled } from "../../store/tutorial"
+import { authed, roleSuper } from "../../store/user"
+import { taskTab, taskId, challengeDisplay } from "../../store/task"
 import { useRoute, useRouter } from "vue-router"
-import { TASK_TYPE } from "../utils/const"
-import Challenge from "./Challenge.vue"
-import Tutorial from "./Tutorial.vue"
+import { TASK_TYPE } from "../../utils/const"
+import ChallengeList from "./ChallengeList.vue"
+import TutorialContent from "./TutorialContent.vue"
 import TaskStatsModal from "./TaskStatsModal.vue"
 
 const route = useRoute()
 const router = useRouter()
 const statsModal = ref(false)
 
-// 路由同步：在 setup 阶段立即执行，不等 onMounted
-const routeName = route.name as string
-if (routeName.startsWith("home-tutorial")) {
-  taskTab.value = TASK_TYPE.Tutorial
-  if (route.params.display) step.value = Number(route.params.display)
-} else if (routeName.startsWith("home-challenge")) {
-  taskTab.value = TASK_TYPE.Challenge
-  if (route.params.display)
-    challengeDisplay.value = Number(route.params.display)
+// 路由同步：初始执行 + watch 响应 SPA 内部导航
+function syncRoute(routeName: string) {
+  if (routeName.startsWith("home-tutorial")) {
+    taskTab.value = TASK_TYPE.Tutorial
+    if (route.params.display) step.value = Number(route.params.display)
+  } else if (routeName.startsWith("home-challenge")) {
+    taskTab.value = TASK_TYPE.Challenge
+    if (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" })
   }
 }
diff --git a/src/components/TaskStatsModal.vue b/src/components/task/TaskStatsModal.vue
similarity index 99%
rename from src/components/TaskStatsModal.vue
rename to src/components/task/TaskStatsModal.vue
index 58e6cc6..de1039d 100644
--- a/src/components/TaskStatsModal.vue
+++ b/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 type { TaskStatsOut } from "../utils/type"
+import { Submission } from "../../api"
+import type { TaskStatsOut } from "../../utils/type"
 
 const props = defineProps<{ taskId: number; show: boolean }>()
 const emit = defineEmits<{ (e: "update:show", v: boolean): void }>()
diff --git a/src/components/Tutorial.vue b/src/components/task/TutorialContent.vue
similarity index 95%
rename from src/components/Tutorial.vue
rename to src/components/task/TutorialContent.vue
index dc4f955..dc1b9f5 100644
--- a/src/components/Tutorial.vue
+++ b/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 { Tutorial } from "../api"
-import { step, tutorialIds } from "../store/tutorial"
-import { taskId } from "../store/task"
+import { css, html, js, tab } from "../../store/editors"
+import { Tutorial } from "../../api"
+import { step, tutorialIds } from "../../store/tutorial"
+import { taskId } from "../../store/task"
 import { useRouter } from "vue-router"
 
 marked.use({
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index bece0ca..cda14db 100644
--- a/src/pages/Home.vue
+++ b/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"
 
diff --git a/src/store/task.ts b/src/store/task.ts
index d778b4c..35c3258 100644
--- a/src/store/task.ts
+++ b/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)
diff --git a/src/store/tutorial.ts b/src/store/tutorial.ts
index 330cca5..5bd10e1 100644
--- a/src/store/tutorial.ts
+++ b/src/store/tutorial.ts
@@ -1,9 +1,7 @@
+import { useStorage } from "@vueuse/core"
 import { ref } from "vue"
 
-const urlParams = new URLSearchParams(window.location.search)
-const currentStep = urlParams.get("step") ?? "1"
-
-export const step = ref(Number(currentStep))
+export const step = useStorage("tutorial-step", 1)
 export const tutorialIds = ref<number[]>([])
 
 export function prevDisabled(): boolean {
diff --git a/src/utils/helper.ts b/src/utils/helper.ts
index bf48ce6..81c2a43 100644
--- a/src/utils/helper.ts
+++ b/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" })
   }