vue3-mgt-template/src/router/modules/demo.ts

import { route } from '@/utils/tools';
const titleArr = [
    {
        key: 'code',
        title: '面试手写题',
        rank: 1,
    },
    {
        key: 'jsx',
        title: '使用jsx',
    },
    {
        key: 'tools',
        title: '工具方法',
    },
    {
        key: 'importOrExportExcel',
        title: '导入导出excel',
    },
    {
        key: 'clickOutSide',
        title: '点击空白处关闭弹窗或者下拉菜单',
    },
    {
        key: 'nestedFormVaild',
        title: '动态增减嵌套表单验证问题',
    },
    {
        key: 'stepStyle',
        title: '步骤条结构样式',
    },
    {
        key: 'textAlign',
        title: 'css文本两端对齐方式',
    },
    {
        key: 'webWorker',
        title: '创建webWorker时如何不指定特定的文件',
    },
    {
        key: 'borderArrow',
        title: 'div边框箭头和阴影问题',
    },
    {
        key: 'pullLoadData',
        title: '首页高度不够，手写移动端下拉加载历史数据',
    },
    {
        key: 'autoLoadData',
        title: '首页高度足够，自动触发下拉加载数据',
        rank: 2,
    },
    {
        key: 'dynamicNodeEvent',
        title: '动态html加载的事件监听',
    },
    {
        key: 'iframeEvent',
        title: 'iframe页面的事件监听',
    },
    {
        key: 'cookie',
        title: '相同顶级域名不同子域名共享cookie',
    },
    {
        key: 'module',
        title: 'CommonJS AMD CMD ESM总结',
    },
    {
        key: 'viteProxy',
        title: 'vite中设置代理转发',
    },
    {
        key: 'virtualList',
        title: 'item固定高度的虚拟列表实现',
    },
    {
        key: 'sseNative',
        title: 'ai对话流式显示文本(浏览器原生)',
    },
    {
        key: 'sseFetch',
        title: 'ai对话流式显示文本(使用fetch-event-source)',
    },
    {
        key: 'sendBeacon',
        title: 'sendBeacon离开页面埋点保证送达方案',
    },
    {
        key: 'getSymbolObject',
        title: '获取对象中属性为Symbol类型的方法',
    },
    {
        key: 'rebindEvent',
        title: '重复绑定相同事件的执行机制',
    },
    {
        key: 'reg',
        title: '正则表达式',
    },
    {
        key: 'templateReuse',
        title: '在单一vue组件内实现模板复用（非jsx版本）',
    },
    {
        key: 'pullRefresh',
        title: '有弹性的下拉刷新',
    },
    {
        key: 'thirdCompWrap',
        title: '第三方组件二次封装slot传递',
    },
    {
        key: 'blockAllAction',
        title: '阻止页面所有操作',
    },
    {
        key: 'scssLiveTranslate',
        title: 'SCSS → CSS 实时翻译器',
    },
    {
        key: 'chat',
        title: '聊天（智能客服）（移动端查看）',
    },
    {
        key: 'dataSafe',
        title: '数据安全-加密解密与掩码',
    },
    {
        key: 'asyncDynComp',
        title: '异步动态加载组件',
    },
    {
        key: 'deletdNodeModules',
        title: '删除 node_modules 文件夹非常耗时解决办法',
    },
    {
        key: 'base64Tool',
        title: 'base64编码解码工具',
    },
    {
        key: 'resizeElementDialog',
        title: '动态调整element弹窗大小',
    },
    {
        key: 'computedRules',
        title: 'ElementUI的form组件使用rules时动态计算并传入组件实例',
    },
    {
        key: 'computedWithEnumList(AI)',
        title: '接口返回数据需要根据多个枚举值动态计算结果渲染（多个枚举值是接口返回，并且不知道具体返回时间）',
    },
    {
        key: 'computedWithEnumList',
        title: '接口返回数据需要根据多个枚举值动态计算结果渲染（多个枚举值是接口返回，并且不知道具体返回时间）',
    },
    {
        key: 'dsAssign',
        title: '解构赋值中设置初始值不成功，原值为null的问题',
    },
    {
        key: 'catchError',
        title: '明明程序报错，但是控制台不打印错误的几种情况（别怀疑，一定是代码问题，而不是程序运行太久）',
    },
    {
        key: 'scrollSnapType',
        title: '滚动吸附效果',
    },
    {
        key: 'elementPlusMessageBoxUse',
        title: 'element plus中使用messageBox技巧',
    },
    {
        key: 'formItemWithRangeFields',
        title: '表单一个formItem中校验多个字段',
    },
    {
        key: 'eventListenner',
        title: '事件监听器的一些总结',
    },
    {
        key: 'ModifyClosureObject',
        title: '如何修改闭包对象',
    },
    {
        key: 'formChangeTrack',
        title: '表单敏感字段变更追踪标记',
    },
    {
        key: 'lodashExamples',
        title: 'Lodash 经典用法',
    },
    {
        key: 'canvasExample',
        title: 'canvas示例',
    },
    {
        key: 'jsEventLoop',
        title: 'js事件循环',
    },
    {
        key: 'jsHoistingScope',
        title: 'js中变量提升与作用域',
    },
];

// @/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/demo/*.vue');
const secondLevelComponents = import.meta.glob('@/views/demo/*/*.vue');
const components = { ...firstLevelComponents, ...secondLevelComponents };

const demoRoutes = 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, '/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/code',
    meta: {
        icon: 'ep:data-analysis',
        title: '前端示例',
        rank: 1,
    },
    children: [...demoRoutes],
} satisfies RouteConfigsTable;