Skip to content

生成路由排序配置文件和排序索引函数

一次性提示词已完成

本提示词已经落实使用,对应的功能已经实现完善。

在本次对话中,我们将生成一大堆配置文件,以及一个基于配置文件的查询函数。

  1. 分阶段完成任务:二者任务是高耦合的,我要求你先完成数据准备,再开始生成基于数据的索引函数。

上下文

你需要参考的上下文文件如下:

  • 排序配置类型,以及排序处理函数: 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 文件夹

txt
│  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 文件夹

txt
│  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 配置

比如以下例子:

ts
export const routesRank: RoutesRankConfig = {
	/** 缓存管理 */
	cacheManage: {
		rank: 20000,
		children: {
			/** 刷新缓存 */
			refreshCache: 20000,
		},
	},
};

注释缓存管理,来自于 cache-manage/index.vue 文件内的 meta.title 配置。

ts
definePage({
	meta: {
		title: "缓存管理",
		icon: "f7:menu",
	},
});

同理,注释刷新缓存,来自于 cache-manage/refresh-cache/index.vue 文件内的 meta.title 配置。

ts
definePage({
	meta: {
		title: "刷新缓存",
		icon: "f7:menu",
		showParent: true,
	},
});

以此类推。请你主动的阅读每一个 index.vue 文件,获取到 meta.title 配置。

注释风格仅为 jsdoc 风格

我不希望你出现双斜线的注释写法。

正确的注释风格:

ts
/** 缓存管理 */

错误的注释风格:

ts
// 缓存管理

减少嵌套层次

尽管我为你提供了很多例子,但是你不应该新建层次太深的 rank.ts 配置。

只能新建到二级路由的配置文件。然后二级路由的配置文件应该包含全部三级路由的排序配置。

本项目有很多三级路由,我不希望你为了三级路由而新建太多的 rank.ts 配置。

一级路由的配置文件

一级路由内,不应该配置下属的全部路由配置,应该导入二级路由的配置。

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 配置。请你指出来,不需要你代替我更改。

  1. 你替我检查,我是否遵照这一款数值配置规则。
  2. 不需要你替我更改。
  3. 如果默认配置仍旧是 20000,那就不需要你检查。

生成路由排序索引函数

路由排序索引函数。该函数根据深度层级对象 key 值,获取到对象内容

请你先完成生成路由排序配置文件的任务,再开始此处的任务。

我需要你补全该函数: getRouteRank

比如这个例子:

一级路由配置:

ts
import { routesRank as devTeamRoutesRank } from "./dev-team/rank";
export const routesRank = {
	/** 开发团队 */
	devTeam: { children: devTeamRoutesRank, rank: 20000 },
};

二级路由配置,dev-team/rank.ts:

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 配置。

比如以下例子:

ts
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 函数。

核心逻辑如下:

  1. 递归遍历传递进来的路由数组。
  2. 使用全局函数 isRoutePathDetailPage ,判断当前路由是否是详情页。
    • 如果是详情页,那么就结束本次递归函数处理。不做任何处理。
    • 如果是非详情页,就继续处理。
  3. 获取当前路由的子路由。
    • 如果当前路由没有子路由,就结束本次递归。
    • 否则说明当前路由有子路由,就继续处理。
  4. 获取第一个子路由。使用全局函数 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

贡献者

The avatar of contributor named as ruan-cat ruan-cat

页面历史

最近更新