fix: 修复levelKey不存在时显示level1的题目bug

src/configs/routes.ts

@@ -2,6 +2,7 @@ import { RouteRecordRaw } from "vue-router";
 import IndexPage from "../pages/IndexPage.vue";
 import LevelsPage from "../pages/LevelsPage.vue";
 import PlaygroundPage from "../pages/PlaygroundPage.vue";
+import Page404 from "../pages/404Page.vue";
 
 /**
  * 路由列表
@@ -26,4 +27,8 @@ export default [
     path: "/playground",
     component: PlaygroundPage,
   },
+  {
+    path: "/404",
+    component: Page404,
+  },
 ] as RouteRecordRaw[];

src/levels/index.ts

@@ -14,7 +14,7 @@ export const getLevelByKey = (levelKey: string) => {
   return (
     allLevels.find((level) => {
       return level.key === levelKey;
-    }) || allLevels[0]
+    }) || null
   );
 };
 

src/pages/404Page.vue

@@ -0,0 +1,27 @@
+<template>
+  <a-result status="404" title="404" sub-title="当前页面不存在！">
+    <template #extra>
+      <a-button type="primary" @click="backToIndex()">返回首页</a-button>
+    </template>
+  </a-result>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter();
+
+const backToIndex = () => {
+  router.push({ 
+    path: '/learn/level1'
+  });
+}
+</script>
+
+<style>
+.ant-result {
+  /* 158px = 64px(头部菜单) + 24px * 2(正文上下padding) + 46px(底部footer) */
+  height: calc(100vh - 158px);
+  padding: 20px 32px !important;
+}
+</style>

src/pages/IndexPage.vue

@@ -54,15 +54,26 @@ import { QueryExecResult } from "sql.js";
 import { allLevels, getLevelByKey } from "../levels";
 import { checkResult } from "../core/result";
 import CodeEditor from "../components/CodeEditor.vue";
+import { useRouter } from "vue-router";
 
 interface IndexPageProps {
   levelKey?: string;
 }
 
+const router = useRouter();
+
 const props = defineProps<IndexPageProps>();
 const level = computed(() => {
   if (props.levelKey) {
-    return getLevelByKey(props.levelKey);
+    const level = getLevelByKey(props.levelKey);
+    if (level) {
+      return level;
+    }
+    // 跳转到404页面
+    router.push({
+      path: "/404",
+    });
+    return allLevels[0];  // 防止报错
   }
   return allLevels[0];
 });