feat: 自定义实现二级目录排序

src/router/modules/demo.ts

@@ -1,5 +1,10 @@
 import { route } from '@/utils/tools';
 const titleArr = [
+    {
+        key: 'code',
+        title: '面试手写题',
+        rank: 1,
+    },
     {
         key: 'jsx',
         title: '使用jsx',
@@ -43,6 +48,7 @@ const titleArr = [
     {
         key: 'autoLoadData',
         title: '首页高度足够，自动触发下拉加载数据',
+        rank: 2,
     },
     {
         key: 'dynamicNodeEvent',
@@ -80,10 +86,6 @@ const titleArr = [
         key: 'sendBeacon',
         title: 'sendBeacon离开页面埋点保证送达方案',
     },
-    {
-        key: 'code',
-        title: '面试手写题',
-    },
     {
         key: 'getSymbolObject',
         title: '获取对象中属性为Symbol类型的方法',
@@ -128,16 +130,20 @@ const demoRoutes = Object.keys(components).map((path) => {
         component: components[path],
         meta: {
             title: route.getTitleFromPathStr(titleArr, cptPath, '/demo/'),
+            rank: route.getRankFromPathStr(titleArr, cptPath, '/demo/'),
         },
     };
 });
 
+// 子菜单自己实现排序，根据rank字段，默认值99
+demoRoutes.sort((a, b) => Number(a.meta.rank) - Number(b.meta.rank));
+
 export default {
     path: '/demo',
-    redirect: '/demo/jsx',
+    redirect: '/demo/code',
     meta: {
         icon: 'ep:data-analysis',
-        title: '示例',
+        title: '前端示例',
         rank: 1,
     },
     children: [...demoRoutes],

src/router/modules/python.ts

@@ -0,0 +1,60 @@
+import { route } from '@/utils/tools';
+const titleArr = [
+    {
+        key: 'init',
+        title: '初始化环境和工程',
+    },
+];
+
+// @/views/demo/**/*.vue
+/**
+ * (使用 ** 表示递归查找)
+ * 递归匹配views/demo目录下所有.vue文件
+ * 也包含/demo/jsx/components/index.vue 这种某个页面的子组件
+ */
+
+// @/views/demo/*.vue       第一层目录
+// @/views/demo/*/*.vue     第二层目录
+/**
+ * 第一层目录 => 匹配views/demo目录下所有.vue文件(第一层)
+ * 例如 /views/demo/index.vue
+ *
+ * 第二层目录 => 匹配views/demo目录下所有文件夹下的.vue文件(第二层)
+ * 例如 /views/demo/jsx/index.vue
+ *
+ * 不会匹配/views/demo/jsx/components/index.vue 这种某个页面的子组件
+ */
+
+const firstLevelComponents = import.meta.glob('@/views/python/*.vue');
+const secondLevelComponents = import.meta.glob('@/views/python/*/*.vue');
+const components = { ...firstLevelComponents, ...secondLevelComponents };
+
+const pythonRoutes = Object.keys(components).map((path) => {
+    const isHasIndex = path.includes('/index.vue');
+    let cptPath = path.replace(route.FILE_NAME_PREFIX, '');
+    cptPath = isHasIndex ? cptPath.replace('/index.vue', '') : cptPath.replace('.vue', '');
+    cptPath = route.mergeDuplicatePathSegments(cptPath);
+    return {
+        path: cptPath,
+        name: route.convertPathToName(cptPath),
+        component: components[path],
+        meta: {
+            title: route.getTitleFromPathStr(titleArr, cptPath, '/python/'),
+            rank: route.getRankFromPathStr(titleArr, cptPath, '/python/'),
+        },
+    };
+});
+
+// 子菜单自己实现排序，根据rank字段，默认值99
+pythonRoutes.sort((a, b) => Number(a.meta.rank) - Number(b.meta.rank));
+
+export default {
+    path: '/python',
+    redirect: '/python/init',
+    meta: {
+        icon: 'ep:data-analysis',
+        title: 'python示例',
+        rank: 1,
+    },
+    children: [...pythonRoutes],
+} satisfies RouteConfigsTable;

src/utils/tools.ts

@@ -41,7 +41,11 @@ export const route = {
     },
     getTitleFromPathStr: (arr: any, path: string, ignoreFields: string = ''): string => {
         const item = arr.find(({ key }) => path.includes(key));
-        return item ? item.title : path.replace(ignoreFields, ''); // 如果找到，返回 title；否则返回 null
+        return item ? item.title : path.replace(ignoreFields, ''); // 如果找到，返回 title；否则返回文件名
+    },
+    getRankFromPathStr: (arr: any, path: string, ignoreFields: string = ''): string => {
+        const item = arr.find(({ key }) => path.includes(key));
+        return item && item.rank ? item.rank : 99; // 如果找到，返回 title；否则返回99
     },
     mergeDuplicatePathSegments(path: string) {
         // 移除开头和结尾的斜杠，然后按斜杠分割

src/views/python/init/init.vue

@@ -0,0 +1,17 @@
+<template>
+    <div
+        class="markdown-body"
+        v-html="htmlStr"
+    ></div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { marked } from 'marked';
+import { getMarkdownContent } from '@/utils/tools';
+
+const htmlStr = ref('');
+getMarkdownContent('./md/python-init.md').then((res) => {
+    htmlStr.value = marked(res);
+});
+</script>