merge: 自学模块支持 C 语言教程

- 路由改为 /learn/:type/:step，按语言分流
- 导航栏自学变二级菜单，按语言记住上次学到的课
- 示例代码编辑器语言跟随教程类型

src/oj/api.ts

@@ -254,8 +254,8 @@ export function getTutorial(id: number) {
   return http.get("tutorial", { params: { id } })
 }
 
-export function getTutorials() {
-  return http.get("tutorials")
+export function getTutorials(type: "python" | "c") {
+  return http.get("tutorials", { params: { type } })
 }
 
 export function getAIDetailData(start: string, end: string, username?: string) {

src/oj/learn/index.vue

@@ -57,7 +57,7 @@
           content-style="height: calc(100% - 44px); padding: 0;"
         >
           <CodeEditor
-            language="Python3"
+            :language="editorLanguage"
             v-model="tutorial.code"
             height="100%"
           />
@@ -102,7 +102,7 @@
         </n-tab-pane>
 
         <n-tab-pane name="code" tab="示例代码" v-if="tutorial.code">
-          <CodeEditor language="Python3" v-model="tutorial.code" />
+          <CodeEditor :language="editorLanguage" v-model="tutorial.code" />
         </n-tab-pane>
       </n-tabs>
 
@@ -128,16 +128,23 @@
         </n-button>
       </n-flex>
     </template>
+
+    <n-empty
+      v-if="isEmpty"
+      description="该教程还没有公开"
+      style="margin-top: 80px"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { MdPreview } from "md-editor-v3"
 import "md-editor-v3/lib/preview.css"
-import type { Tutorial, Exercise } from "utils/types"
+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"),
@@ -150,21 +157,32 @@ const isDark = useDark()
 const route = useRoute()
 const router = useRouter()
 const { isDesktop } = useBreakpoints()
+const { learnStep } = useLearnProgress()
 
 const step = computed(() => {
-  if (!route.params.step || !route.params.step.length) return 1
-  return parseInt(route.params.step[0])
+  const value = route.params.step as string | undefined
+  if (!value) return 1
+  return parseInt(value)
 })
 
+const type = computed<"python" | "c">(() =>
+  route.params.type === "c" ? "c" : "python",
+)
+
 const tutorial = ref<Partial<Tutorial>>({
   id: 0,
   title: "",
   content: "",
   code: "",
 })
+
+const editorLanguage = computed<LANGUAGE>(() =>
+  tutorial.value.type === "c" ? "C" : "Python3",
+)
 const titles = ref<{ id: number; title: string }[]>([])
 const exercises = ref<Exercise[]>([])
 const activeTab = ref("content")
+const isEmpty = ref(false)
 
 const segments = computed(() =>
   parseExercises(tutorial.value.content ?? "", exercises.value),
@@ -175,7 +193,9 @@ const isLastLesson = computed(() => step.value === titles.value.length)
 
 function goToLesson(lessonNumber: number) {
   activeTab.value = "content"
-  router.push("/learn/" + lessonNumber.toString().padStart(2, "0"))
+  router.push(
+    `/learn/${type.value}/${lessonNumber.toString().padStart(2, "0")}`,
+  )
 }
 function goToPrevLesson() {
   if (step.value > 1) goToLesson(step.value - 1)
@@ -185,9 +205,10 @@ function goToNextLesson() {
 }
 
 async function init() {
-  const res1 = await getTutorials()
+  const res1 = await getTutorials(type.value)
   titles.value = res1.data
-  if (titles.value.length === 0) return
+  isEmpty.value = titles.value.length === 0
+  if (isEmpty.value) return
   const id = titles.value[step.value - 1].id
   const [res2, exs] = await Promise.allSettled([
     getTutorial(id),
@@ -195,10 +216,11 @@ 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(
-  () => route.params.step,
+  () => [route.params.type, route.params.step],
   async () => {
     if (route.name === "learn") init()
   },

src/routes.ts

@@ -99,7 +99,7 @@ export const ojs: RouteRecordRaw = {
       meta: { requiresAuth: true },
     },
     {
-      path: "learn/:step+",
+      path: "learn/:type/:step",
       name: "learn",
       component: () => import("oj/learn/index.vue"),
       props: true,

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 }
+}