// Use when: registering new pages into the dynamic router system. Adds route entries to dynamicRouter.json and optionally updates keepAliveConfig.ts. Triggers on: route registration, 注册路由, 添加菜单, menu registration, 路由配置, dynamicRouter, 新增页面路由.
| name | route-sync |
| description | Use when: registering new pages into the dynamic router system. Adds route entries to dynamicRouter.json and optionally updates keepAliveConfig.ts. Triggers on: route registration, 注册路由, 添加菜单, menu registration, 路由配置, dynamicRouter, 新增页面路由. |
将新建页面注册到 Robot Admin 的 动态路由系统，包括：
dynamicRouter.json 中添加路由条目keepAliveConfig.ts 缓存配置routeMeta 字段Robot Admin 使用本地 JSON 文件模拟后端动态路由接口：
src/assets/data/dynamicRouter.json
结构：
{
"code": "0",
"data": [
{
"path": "/模块路径",
"name": "模块名",
"component": "layout",
"redirect": "/模块路径/默认子页",
"meta": { "icon": "mdi:xxx", "title": "模块标题" },
"children": [
{
"path": "子路径",
"name": "路由名称",
"component": "/views下的组件路径/index",
"meta": {
"icon": "mdi:xxx",
"title": "页面标题",
"hidden": false,
"affix": false,
"keepAlive": true,
"full": false
}
}
]
}
],
"msg": "success"
}
component 字段值会被 dynamicRouter.ts 中的 VIEW_MODULES 映射为实际组件：
"/home/index" → src/views/home/index.vue
"/demo/10-table/index" → src/views/demo/10-table/index.vue
"/sys-manage/user-manage/index" → src/views/sys-manage/user-manage/index.vue
规则：
src/views 前缀和 .vue 后缀/ 开头/index 结尾（对应目录下的 index.vue）| 值 | 含义 |
|---|---|
"layout" | 使用 C_Layout 布局组件（一级菜单必须用） |
"/xxx/index" | 懒加载的页面组件 |
| 字段 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | — | 菜单/标签页标题（必填） |
icon | string | — | MDI 图标名（如 mdi:account） |
hidden | boolean | false | 是否从菜单隐藏（详情/编辑页用） |
affix | boolean | false | 标签页是否固定不可关闭 |
keepAlive | boolean | false | 是否启用页面缓存 |
full | boolean | false | 是否全屏展示（无侧边栏/头部） |
link | string | — | 外链地址（iframe 嵌入） |
根据 page-spec 的 path 确定路由挂载位置：
children 数组中追加data 数组中新增顶级路由节点（component: "layout"）{
"path": "页面路径（kebab-case，不带前导 /）",
"name": "模块-页面名（kebab-case）",
"component": "/模块/页面目录/index",
"meta": {
"icon": "mdi:图标名",
"title": "页面中文标题",
"hidden": false,
"affix": false,
"keepAlive": true,
"full": false
}
}
{
"path": "/模块路径",
"name": "模块名",
"component": "layout",
"redirect": "/模块路径/默认子页",
"meta": {
"icon": "mdi:模块图标",
"title": "模块标题",
"hidden": false,
"full": false,
"affix": false,
"keepAlive": false
},
"children": [
{
"path": "子页面路径",
"name": "模块-子页面名",
"component": "/模块/子页面/index",
"meta": {
"icon": "mdi:子页面图标",
"title": "子页面标题",
"hidden": false,
"affix": false,
"keepAlive": true,
"full": false
}
}
]
}
{
"path": "detail/:id",
"name": "模块-资源-detail",
"component": "/模块/资源-detail/index",
"meta": {
"icon": "mdi:file-document",
"title": "详情",
"hidden": true,
"keepAlive": false
}
}
模块前缀-页面名（kebab-case）
示例：
demo-10-table → /demo/10-table
sys-user-manage → /sys-manage/user-manage
order-detail → /order/detail/:id
如果 meta.keepAlive: true，需在 src/config/keepAliveConfig.ts 中注册：
export const KEEP_ALIVE_PAGES = [
'ComponentName', // 必须与 defineOptions({ name: '...' }) 中的 name 一致
]
生成路由后执行以下检查：
component 路径对应的 .vue 文件存在于 src/views/ 下name 在整个 dynamicRouter.json 中唯一path 不与已有路由冲突redirect 指向有效的子路由keepAlive 为 true 时，组件 name 已在 keepAliveConfig 注册// 追加到 /demo 的 children 中
{
"path": "57-new-feature",
"name": "demo-57-new-feature",
"component": "/demo/57-new-feature/index",
"meta": {
"icon": "mdi:star",
"title": "新功能演示",
"hidden": false,
"keepAlive": true
}
}
// 新增顶级菜单
{
"path": "/order-manage",
"name": "order-manage",
"component": "layout",
"redirect": "/order-manage/order-list",
"meta": {
"icon": "mdi:receipt",
"title": "订单管理"
},
"children": [
{
"path": "order-list",
"name": "order-list",
"component": "/order-manage/order-list/index",
"meta": {
"icon": "mdi:format-list-bulleted",
"title": "订单列表",
"keepAlive": true
}
},
{
"path": "order-detail/:id",
"name": "order-detail",
"component": "/order-manage/order-detail/index",
"meta": {
"icon": "mdi:file-document",
"title": "订单详情",
"hidden": true
}
}
]
}
| 文件 | 操作 |
|---|---|
src/assets/data/dynamicRouter.json | 追加路由条目 |
src/config/keepAliveConfig.ts | 可选：追加缓存组件名 |
"user-manage"，不是 "/user-manage"）"/sys-manage/user-manage/index"@iconify/vue 的 MDI 图标集Use when: upgrading dependencies, adding common features, or when the user explicitly requests branch sync check. Triggers on: 分支同步, branch sync, 版本升级, dependency upgrade, 同步更新, sync branches, 依赖更新, 通用功能.
Use when: generating Vue 3 page code from either a page-spec JSON or a natural language description. Outputs index.vue + data.ts + index.scss following Robot Admin conventions. Triggers on: page generation, code generation, 生成页面, 代码生成, vue页面, codegen, 页面骨架, scaffold, 建个页面, 写个页面, 帮我做个页面, 口述需求, natural language page request.
Use when: generating mock data for development without a backend. Optional skill - activated when user confirms or explicitly requests it. Triggers on: 生成mock, mock数据, 模拟数据, mock生成, 前端mock, 联调前mock.
Use when: generating TypeScript API layer (type definitions + request functions) from page-spec JSON or Swagger/OpenAPI docs. Triggers on: api contract, api generation, 接口约定, 生成api, swagger to ts, openapi, 接口文件, api层.
Use when: reviewing code for compliance with Robot Admin project conventions, or when generating a compliance report. Triggers on: convention check, 规范检查, audit, 代码审查, code review, 命名规范, naming convention, 代码规范.
Use when: analyzing Axure exported HTML prototype files or detailed design documents to extract page inventory, classify interaction patterns, and produce a structured page-spec JSON for Vue 3 + Naive UI development. Triggers on: prototype analysis, axure scan, page inventory, 原型解析, 页面清单, axure转vue, 详设文档, design doc.