浅论CabloyJS全栈框架提供的“两级页签”机制

CabloyJS 全栈框架的“两级页签”本质上不是单纯的 UI 格式，而是一种把“业务模块切换”与“模块内多工作项切换”分层管理的工作台机制。
一、先说结论：两级页签分别代表什么

1）一级页签：业务模块 / 业务入口

一级页签对应 RouteTab，核心标识是 tabKey，标题和图标来自菜单信息 getTabInfo(tabKey)，也就是它更像一个业务分组或功能入口。
一级页签的业务意义是：

让用户在“用户管理、订单管理、内容管理、首页”等业务域之间切换。

它代表的是“我如今在哪个业务模块里工作”。
2）二级页签：模块内的具体工尴尬刁难象 / 工作实例

二级页签对应 RouteTab.items[] 中的每个 IRouteViewRouteItem，核心标识是 componentKey，标题来自运行时 pageMeta.pageTitle，不是菜单标题。
二级页签的业务意义是：

在同一个业务模块下，同时打开多个具体使命、表单、记录或页面实例。

比方在“用户管理”一级页签下，可以同时有：

• 用户列表
  
• 新建用户
  
• 编辑用户 A
  
• 编辑用户 B
  

这就是典范的模块内多文档 / 多使命工作模式。
二、代码里是怎么把“两级”区分出来的

核心在路由被转换成两个 key：

• tabKey：决定归属哪个一级页签
  
• componentKey：决定模块内是不是同一个页面实例
  

1）tabKey：业务归组

1. const tabKey = this._handleRouteProp(route, 'tabKey') || componentKey;

复制代码

寄义是：

• 假如路由显式声明确 meta.tabKey，那么多个页面可以归到同一个一级页签下
  
• 假如没声明，就退化成 tabKey = componentKey，也就是“一页一个一级页签”
  

这阐明两级页签不是硬编码死的，而是一个按业务必要启用的分组机制。
2）componentKey：页面实例区分

componentKey 优先取路由 meta 设置，否则按 route name/path 推导。
这里特别告急的是：

• 默认大概按 route.path 区分
  
• 假如 componentKeyMode === 'nameOnly'，则按路由名归一
  

业务寄义是：

• 有些页面渴望“同类页面共用一个实例”
  
• 有些页面渴望“差别参数/路径形成差别实例”
  

也就是说，二级页签不是简朴“多开页面”，而是支持按业务语义控制“是否多开”。
三、为什么要做两级，而不是只做一级多标签

这是这套机制最核心的业务代价。
1）制止一级页签爆炸

假如只有一级页签，那么每打开一个“编辑用户”“检察订单”“新建文章”，顶层标签都会越来越多，末了酿成：

• 用户管理
  
• 编辑用户A
  
• 编辑用户B
  
• 订单管理
  
• 编辑订单X
  
• 创建订单
  
• 内容管理
  
• 编辑文章1
  
• 编辑文章2
  

如许顶层结构就失去“业务导航”的意义了。
两级计划后：

• 一级页签保持稳固：用户管理 / 订单管理 / 内容管理
  
• 二级页签承载临时工作项：编辑A / 编辑B / 创建 / 检察详情
  

这就把导航层和工作层分开了。
2）让用户生存“模块上下文”

点一级页签时，体系不是简朴跳到固定首页，而是优先回到该一级页签关联的首个路由项。
这意味着：

用户切回“用户管理”时，不但是重新打开菜单，而是回到这个业务域当前的工作上下文。

业务上这很告急，由于配景体系用户经常是在多个模块间往返切换处置惩罚变乱，而不是一次只做一个使命。
3）支持同模块下的多对象并行处置惩罚

RouteTab.items 是一个数组，一个一级页签下可以挂多个页面实例。
这意味着同一个模块下可以并行做多件事，好比：

• 在“商品管理”里同时编辑商品 A、B、C
  
• 在“订单管理”里同时检察订单详情、发货页、售后页
  
• 在“内容管理”里同时新建文章、修改文章、预览文章
  

这比传统单页返回列表再点下一条的方式，更靠近桌面应用/IDE 的工作体验。
4）二级页签标题是“使命标题”，不是“菜单标题”

一级页签标题来自菜单 title/icon，而二级页签标题来自页面运行时 pageMeta.pageTitle。
业务意义很明确：

• 一级页签告诉你“在哪个模块”
  
• 二级页签告诉你“当前具体在处置惩罚什么对象”
  

这是两个差别条理的信息。
四、这套机制另有几个很有业务味道的计划

1）一级页签有“固定业务入口”概念

Admin 初始化时默认放入一个 affix 页签 /，在模子里 affix 页签不可随意被裁剪、也不会容易消散。
业务上就是：

首页、主工作台、固定入口是“常驻工作台”的一部门。

2）二级页签里有一个“隐形首项”

渲染二级页签时会跳过 componentKey === tabKey 的那一项，同时模子里又明确“不删除 first tabItem”。
这阐明每个一级页签下着实有一个底子入口页作为锚点，但这个锚点不愿定展示成二级标签。
业务意义：

一级页签不是空容器，它总有一个底子着陆页；二级页签表现的是“额外打开的工作项”。

这让结构更稳固。
3）支持未生存、创建态、编辑态提示

二级页签图标会根据 pageMeta 厘革：

• pageDirty：星号
  
• formScene === create：新建图标
  
• formScene === edit：编辑图标
  

业务意义是：

二级页签不但表现“打开了什么”，还表现“这个工作项当前处于什么状态”。

非常适当配景表单麋集型业务。
4）支持容量控制，防止工作台失控

模子支持：

• 一级页签最大数目 max
  
• 二级页签最大数目 maxItems
  
• 超出后按近来最少使用倾向清算旧项
  

业务意义：

体系答应用户多开，但不会无穷膨胀到难以管理。

五、可以把它明确成什么业务模子

我以为最正确的明确是：
一级页签 = Workspace / Business Domain

代表一个业务工作区，好比：

• 首页
  
• 用户管理
  
• 订单管理
  
• 内容管理
  

二级页签 = Task / Document / Instance

代表这个工作区里的具体工尴尬刁难象，好比：

• 新建用户
  
• 编辑用户张三
  
• 编辑用户李四
  
• 检察订单 2026001
  

这着实很像：

• 欣赏器：站点级标签 + 页面内上下文
  
• IDE：项目/目次 + 打开的文件
  
• ERP/配景：模块入口 + 当前处置惩罚票据/表单
  

以是它的业务意义不是“多一行 tabs”，而是：

把配景体系从“菜单跳转式利用”升级成“工作台式并行处置惩罚”。

六、联合 Admin 这套实现，可得出的终极判断

在 Admin 结构里，这套两级页签机制的目标非常明确：

• 一级页签承载菜单级业务导航
  
• 二级页签承载当前业务模块下的多使命/多对象并行处置惩罚
  
• 通过 tabKey 与 componentKey 解耦“业务归组”和“页面实例”
  
• 通过 pageMeta 给工作项增长状态语义
  
• 通过 cache / keepAlive / prune 让工作台既连续又可控
  

七、用一句话概括

一句话总结：

Cabloy 的两级页签机制，本质上是在配景工作台中，把“业务模块切换”与“模块内多文档/多使命处置惩罚”分层管理，从而同时分身导航稳固性、并行作业本领、页面状态表达和工作现场规复。

GitHub：https://github.com/cabloy/cabloy