• No coupling: 每个插件只负责单一功能，无相互依赖。
• Straightforward usage: 像使用 vue-router 一样调用。只需在 router 实例里声明 { plugins: }.
• Easily extensible: 按需引入插件，实现渐进式增加功能。

示例的观点是，面包屑插件

// router.ts
import { createRouter } from '@pro/router';import breadcrumbPlugin from '@pro/router/plugins/breadcrumb';按理说，export default createRouter({
routes。plugins:,})，

The plugin injects a custom field into each route record,which can be consumed by any component:

// component.vue
import { useRouteMeta } from '@pro/router';const breadcrumb = useRouteMeta;

This “搭积木”式的设计。使得您只需要关注当前业务所需的插件，无需担心整体结构被牵连。

布局的策略模式设计 🎨

Solve: 大量 if/else 判断导致代码膨胀且难以维护。

至于组件库。pro-naive-ui

`pro-naive-ui` 是基于 naive-ui 的高级组件库，已对表单、表格等常用组件进行公司级封装。布局组件作为其中独立模块，可独立引用或替换。

七大布局 + 移动端支持

左侧导航 + 顶部工具栏

The component exposes a set of props & slots that drive its appearance. Internally we apply **Strategy Pattern**: each layout mode maps to a dedicated CSS strategy rar than conditional logic.

如何自定义布局？

If you need a brand‑new layout that isn’t covered by built‑in strategies,simply create your own CSS strategy and plug it into layout component – no changes to core code required.

菜单的无头能力设计 🗂️

The menu system is decoupled from any specific UI component . We expose a composable `useMenu` that delivers processed menu trees based on current layout mode.

主要属性

• `menus`: 完整原始菜单数据
• 从`mode`来看。当前布局模式
• `mixedSidebarLayout`: 自动拆分并同步给对应侧边栏组件

You only need to consume `mixedSidebarLayout` in your custom menu component – all联动逻辑已在 composable 内完成。This gives you complete freedom to render menus however you like .

多页签拦截器模式设计 🏷️

The tab bar is treated as a **route history plugin** . By intercepting add / remove / move operations we provide hooks for every custom scenario.

拦截器 API

• `onBeforeAdd` – return false 阻止加入
• `onAfterAdd` – 添加后回调，可修改 title 等属性
• `onBeforeRemove` – 删除前确认或条件过滤

场景示例

自定义 Title

// 在页面初始化时
visitedRoutesPlugin.onAfterAdd => {
if r.meta.title = `使用者 #${r.params.id}`;})，

为每行数据打开独立 Tab

// 表格行点击
function onRowClick {
visitedRoutesPlugin.add({
从name来看。'UserDetail',params: { id: row.id },meta: { title: `详情 – ${row.name}` }
});}

相关链接 🔗

• 预览地址的观点是，
• GitHub 地址：
• pro‑naive‑ui 文档：
• pro‑naive‑ui GitHub：