feat(learn): 导航栏自学二级菜单，按语言记住学习进度

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/oj/learn/index.vue

@@ -144,6 +144,7 @@ import type { Tutorial, Exercise, LANGUAGE } from "utils/types"
 import { getTutorial, getTutorials, getExercises } from "../api"
 import { parseExercises } from "./composables/useExerciseParse"
 import { useBreakpoints } from "shared/composables/breakpoints"
+import { useLearnProgress } from "shared/composables/learnProgress"
 
 const ExerciseWidget = defineAsyncComponent(
   () => import("./components/ExerciseWidget.vue"),
@@ -156,6 +157,7 @@ const isDark = useDark()
 const route = useRoute()
 const router = useRouter()
 const { isDesktop } = useBreakpoints()
+const { learnStep } = useLearnProgress()
 
 const step = computed(() => {
   const value = route.params.step as string | undefined
@@ -214,6 +216,7 @@ async function init() {
   ])
   if (res2.status === "fulfilled") tutorial.value = res2.value.data
   exercises.value = exs.status === "fulfilled" ? exs.value : []
+  learnStep.value[type.value] = step.value
 }
 
 watch(

src/shared/components/Header.vue

@@ -2,6 +2,7 @@
 import { Icon } from "@iconify/vue"
 import { RouterLink } from "vue-router"
 import { useBreakpoints } from "shared/composables/breakpoints"
+import { useLearnProgress } from "shared/composables/learnProgress"
 import { useAuthModalStore } from "shared/store/authModal"
 import { useScreenModeStore } from "shared/store/screenMode"
 import { logout } from "../api"
@@ -17,6 +18,7 @@ const route = useRoute()
 const router = useRouter()
 
 const { isMobile, isDesktop } = useBreakpoints()
+const { learnStep } = useLearnProgress()
 
 const isDark = useDark()
 
@@ -125,11 +127,31 @@ function renderIcon(icon: string) {
   return () => h(Icon, { icon, width: 20 })
 }
 
+function learnLink(type: "python" | "c") {
+  return `/learn/${type}/${learnStep.value[type].toString().padStart(2, "0")}`
+}
+
 const menus = computed<MenuOption[]>(() => [
   {
-    label: () => h(RouterLink, { to: "/learn/01" }, { default: () => "自学" }),
+    label: "自学",
     key: "learn",
     icon: renderIcon("fluent-emoji:books"),
+    children: [
+      {
+        label: () =>
+          h(
+            RouterLink,
+            { to: learnLink("python") },
+            { default: () => "Python" },
+          ),
+        key: "learn-python",
+      },
+      {
+        label: () =>
+          h(RouterLink, { to: learnLink("c") }, { default: () => "C语言" }),
+        key: "learn-c",
+      },
+    ],
   },
   {
     label: () => h(RouterLink, { to: "/" }, { default: () => "题目" }),

src/shared/composables/learnProgress.ts

@@ -0,0 +1,15 @@
+import { useStorage } from "@vueuse/core"
+import { STORAGE_KEY } from "utils/constants"
+
+export type TutorialType = "python" | "c"
+
+// 模块级单例：学习页写入、导航栏读取，必须共用同一个响应式引用，
+// 否则导航栏的链接不会随学习进度更新
+const learnStep = useStorage<Record<TutorialType, number>>(
+  STORAGE_KEY.LEARN_CURRENT_STEP,
+  { python: 1, c: 1 },
+)
+
+export function useLearnProgress() {
+  return { learnStep }
+}