生成路由排序配置文件和排序索引函数
一次性提示词已完成
本提示词已经落实使用,对应的功能已经实现完善。
在本次对话中,我们将生成一大堆配置文件,以及一个基于配置文件的查询函数。
- 分阶段完成任务:二者任务是高耦合的,我要求你先完成数据准备,再开始生成基于数据的索引函数。
上下文
你需要参考的上下文文件如下:
- 排序配置类型,以及排序处理函数:
apps\admin\src\router\rank\index.ts - 一级路由的排序配置文件:
apps\admin\src\pages\rank.ts - 运营团队,二级路由的排序配置文件:
apps\admin\src\pages\operation-team\rank.ts - 页面文件目录:
apps\admin\src\pages RankRouteKeys类型文件:apps\admin\src\router\rank\rank-route-keys.ts
基于文件目录的路由结构
我们的路由是基于文件目录生成的。
忽略详情页
页面文件目录,是会包含详情页的。详情页不要做任何处理。
凡是在 -detail-page 目录下的文件,都不要做处理。
- 详情页不要增加 rank 路由配置。
- 详情页不要被 rank.ts 文件配置任何排序。
生成路由排序配置文件
路由排序配置文件。
请修改或新建路由排序配置文件。
文件名称默认为 rank.ts
你新建的路由排序配置文件,其命名必须为 rank.ts。不接受其他命名。
在非叶子节点的 index.vue 文件旁边新建排序配置文件
当一个 index.vue 文件的并列内容,有很多文件夹时。那么这个页面就不属于叶子节点。
请阅读以下目录结构例子,我会告诉你那些 index.vue 是非叶子节点:
例子 1:忽略掉 -detail-page 文件夹
│ index.vue // 是非叶子节点 请在此处新建 rank.ts 配置
├─building-space-structure-diagram
│ index.vue
├─handing-business
│ index.vue
├─house-decoration
│ │ index.vue // 直接忽略掉 -detail-page 文件夹,不生成详情页的文件排序 故此文件是叶子节点
│ ├─-detail-page
│ │ house-decoration-[id].vue
│ │ index.vue
│ └─components
├─my
│ index.vue
├─notice
│ index.vue
├─parking-space-structure-diagram
│ index.vue
└─property-register
index.vue例子 2:忽略掉 components 文件夹
│ index.vue // 是非叶子节点 请在此处新建 rank.ts 配置
├─carport-apply
│ index.vue
├─carport-info
│ index.vue
├─owner-vehicle
│ │ index.vue // 直接忽略掉 components 文件夹 故此文件是叶子节点
│ └─components
│ addForm.ts
│ addForm.vue
│ editForm.ts
│ editForm.vue
└─parking-lot
index.vue初始化的 rank 配置默认写死
在生成 rank 排序值时,我要求你默认写死为 20000 。未来我会手动的设置菜单排序的值。
在你为一个全新的菜单目录创建 rank 值时,你就默认写死 20000 即可。
每一个层次的路由都要配置 rank
每一个路由都要配置 rank。
对外导出的变量名仅为 routesRank
rank.ts 配置对外仅导出一个名为 routesRank 的对象。名称必须统一为 routesRank。
变量名默认为小驼峰风格
每一个路由的变量名,都根据对应文件夹的命名来生成。比如以下情况:
文件夹名称为:
- operation-team
- organize-manage
- property-manage
那么你生成的变量名就应该为:
- operationTeam
- propertyManage
- organizeManage
你应该使用小驼峰命名风格。
注释来自于对应页面的 title 配置
比如以下例子:
export const routesRank: RoutesRankConfig = {
/** 缓存管理 */
cacheManage: {
rank: 20000,
children: {
/** 刷新缓存 */
refreshCache: 20000,
},
},
};注释缓存管理,来自于 cache-manage/index.vue 文件内的 meta.title 配置。
definePage({
meta: {
title: "缓存管理",
icon: "f7:menu",
},
});同理,注释刷新缓存,来自于 cache-manage/refresh-cache/index.vue 文件内的 meta.title 配置。
definePage({
meta: {
title: "刷新缓存",
icon: "f7:menu",
showParent: true,
},
});以此类推。请你主动的阅读每一个 index.vue 文件,获取到 meta.title 配置。
注释风格仅为 jsdoc 风格
我不希望你出现双斜线的注释写法。
正确的注释风格:
/** 缓存管理 */错误的注释风格:
// 缓存管理减少嵌套层次
尽管我为你提供了很多例子,但是你不应该新建层次太深的 rank.ts 配置。
你只能新建到二级路由的配置文件。然后二级路由的配置文件应该包含全部三级路由的排序配置。
本项目有很多三级路由,我不希望你为了三级路由而新建太多的 rank.ts 配置。
一级路由的配置文件
一级路由内,不应该配置下属的全部路由配置,应该导入二级路由的配置。
import { routesRank as operationTeamRoutesRank } from "./operation-team/rank";
export const routesRank = {
/** 运营团队 */
operationTeam: { children: operationTeamRoutesRank, rank: 20000 },
// 后续的二级路由也应该导入配置文件
};rank 取值规则
不同级别的路由,使用不同位数的数值写法。
- 一级路由 使用万位。比如 10000、20000、30000 的位数来排序。
- 二级路由 使用百位。比如 100、200、300 的位数来排序。
- 三级路由 使用十位和个位。比如 11、12、20、25、30 的位数来排序。
这个规则是我来实践的,我会更改你写死的 20000 取值,改成满足业务场景的取值。
如果我没有按照这样的取值规则来配置各个 rank 配置。请你指出来,不需要你代替我更改。
- 你替我检查,我是否遵照这一款数值配置规则。
- 不需要你替我更改。
- 如果默认配置仍旧是
20000,那就不需要你检查。
生成路由排序索引函数
路由排序索引函数。该函数根据深度层级对象 key 值,获取到对象内容
请你先完成生成路由排序配置文件的任务,再开始此处的任务。
我需要你补全该函数: getRouteRank
比如这个例子:
一级路由配置:
import { routesRank as devTeamRoutesRank } from "./dev-team/rank";
export const routesRank = {
/** 开发团队 */
devTeam: { children: devTeamRoutesRank, rank: 20000 },
};二级路由配置,dev-team/rank.ts:
import type { RoutesRankConfig } from "@/router/rank";
export const routesRank: RoutesRankConfig = {
/** 菜单管理 */
menuManage: {
rank: 100,
children: {
/** 菜单目录 */
catalog: 10,
/** 菜单组 */
group: 20,
/** 菜单项 */
item: 30,
},
},
};传参
key 值,传递字符串 devTeam.menuManage.group
key 值传递的是各个路由名称的拼接字符串。比如:
- devTeam.menuManage.group
- devTeam.menuManage.item
传参 key 值的类型约束 RankRouteKeys 类型
key 值应该实现字符串的类型推导。要能够帮助我推断出以下结构的字符串:
- devTeam.menuManage.item
- devTeam
- devTeam.menuManage
请你在 RankRouteKeys 类型内,直接枚举出全部要使用的 key 值,不使用递归推导的方式实现。
返回值
通过遍历每一个路由项目,相加得到最后的结果。是一个数值。
具体算法 20000+100+20 = 20120。
比如:
传参 key: devTeam.menuManage.item
返回值: 20000+100+30 = 20130
传参 key: devTeam.menuManage
返回值: 20000+100 = 20100
传参 key: devTeam.menuManage.catalog
返回值: 20000+100+10 = 20110
补充测试用例
编写测试用例,测试 getRouteRank 函数的返回结果。
为页面设置路由排序索引函数
在已经准备好 路由排序索引函数 时,为每一个满足要求的页面,设置 rank 配置。
比如以下例子:
definePage({
meta: {
title: "组织信息",
icon: "f7:menu",
rank: getRouteRank("settingManage.organizeManage.orgInfo"),
},
});这是 组织信息 页面,是可以设置 rank 配置的。在设置时,应该根据 rank.ts 内提供的字段,索引出最终的排序字段。
除了具体的叶子节点页面需要设置以外,一级路由、二级路由、非叶子节点的页面,都要设置 meta.rank 配置。
除了详情页 -detail-page 目录下的文件,不做 meta.rank 配置以外。其他的页面都需要设置好 rank 排序配置。
使用全局导入的 getRouteRank 函数
请不要直接手动导入 getRouteRank 函数,直接使用该函数即可。避免使用手动导入的写法。
分批次的逐步配置
请你读取页面文件目录内的 vue 组件,逐步的设置 rank 配置。
实现 路由排序函数
已实现。
实现 基于路由排序配置设置路由重定向函数
请为我补全 function setRedirectByRank(autoRoutesParams: RouteRecordRaw[]) {} 函数,实现 setRedirectByRank 函数。
核心逻辑如下:
- 递归遍历传递进来的路由数组。
- 使用全局函数 isRoutePathDetailPage ,判断当前路由是否是详情页。
- 如果是详情页,那么就结束本次递归函数处理。不做任何处理。
- 如果是非详情页,就继续处理。
- 获取当前路由的子路由。
- 如果当前路由没有子路由,就结束本次递归。
- 否则说明当前路由有子路由,就继续处理。
- 获取第一个子路由。使用全局函数 isRoutePathDetailPage ,判断当前子路由是否是详情页。
- 如果是详情页,就继续选择下一个子路由,直到被选择的子路由不是详情页。
- 如果一直选择不到非详情页,就结束本路由的处理。结束本次递归。
- 如果不是详情页,就选择该子路由的 path 路径,设置当前路由的 redirect 重定向配置。
- 设置完重定向后,开始下一层递归。
传入的参数是有序的
默认传入进来的路由,是已经经过排序的路由,是有序的路由,不需要你做排序处理。
提供测试用例
在 apps\admin\src\router\rank\tests\setRedirectByRank.test.ts 文件内,补全该函数的测试用例。
编写函数说明文档
在 apps\admin\src\router\rank\docs\setRedirectByRank.md 文件内,编写该函数的说明文档。
- 编写说明文档,并编写简单的使用案例。
- 必须提供 mermaid 流程图,详细说明该函数的内部业务处理逻辑。
页面文件变更时的处理
有时候,页面文件目录 apps\admin\src\pages 的页面会新增、或调整删改,请你帮我及时更新配置文件,并及时维护变量。你要帮我维护更改的文件如下:
- 一级路由,二级路由的 rank.ts 路由排序配置文件。
- 路由 key 值类型
apps\admin\src\router\rank\rank-route-keys.ts。