// 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.
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: 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 | prototype-scan |
| description | 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. |
将 Axure 导出的 HTML 原型包 或 详细设计文档（MD/Word/表格） 解析为结构化的 page-spec JSON 页面清单，作为后续接口约定和代码生成的输入。
两种输入，同一输出：输出格式完全相同（page-spec JSON），消费方（page-codegen）无需感知来源。
遍历所有 .html 文件，提取：
| 区域 | 提取内容 |
|---|---|
| 标题 | <title> / 标题文本 → 页面名称 |
| 表格 | <table> / 网格布局 → 表格列定义 |
| 表单 | <input> / <select> / 标签文本 → 查询条件和表单字段 |
| 按钮 | <button> / 链接文本 → 操作按钮列表 |
| 弹窗 | 遮罩层 / 弹出层 → 弹窗组件 |
| 树形 | 侧边栏 / 树形导航 → 树形结构 |
| 注释 | Axure 注解 → 业务说明 |
从 MD/Word/表格中提取：
| 模式 | 特征 | Robot Admin 组件 |
|---|---|---|
LIST | 查询区 + 表格 + 分页 | C_Form(search) + C_Table + C_ActionBar |
MASTER_DETAIL | 上方主表 + 下方明细表 | C_SplitPane + 两个 C_Table |
TREE_LIST | 左侧树 + 右侧表格 | C_SplitPane + C_Tree + C_Table |
FORM_PAGE | 独立表单页面（多Tab/多字段） | C_Form(tabs/steps) + 独立路由 |
FORM_MODAL | 弹窗中的表单 | NModal + C_Form |
DETAIL_TABS | 详情页 + 子表Tab | NTabs + 多个 C_Table |
DASHBOARD | 数据大屏/统计面板 | ECharts + NGrid + NStatistic |
COMPOSITE | 多种组合 | 组合使用 |
对每个页面提取 3 类字段（字段名建议 camelCase）：
查询字段：
中文名 | 建议字段名(camelCase) | 组件类型 | 备注
组件类型对照（C_Form options 中使用）：
| 原型表现 | type 值 | 备注 |
|---|---|---|
| 普通输入框 | input | 默认类型 |
| 下拉选择 | select | 配 options 选项数据 |
| 单日期 | date | — |
| 日期范围 | daterange | — |
| 月份选择 | month | — |
| 数字输入 | inputNumber | — |
| 开关 | switch | — |
| 级联选择 | cascader | — |
| 树选择 | treeSelect | — |
表格列：
列名(中文) | 字段名(camelCase) | 宽度建议 | 是否可排序 | 渲染方式(tag/text/custom)
表单字段（弹窗/独立页面）：
中文名 | 字段名(camelCase) | 类型 | 是否必填 | 校验规则 | 组件类型
工具栏按钮（C_ActionBar）：
按钮标签 | 类型(primary/default/error/warning) | 图标 | 权限码(可选)
操作列按钮：
按钮标签 | 类型 | 条件显示(show函数描述) | 权限码(可选)
⚠️ 注意事项：
- Axure HTML DOM 顺序 ≠ 视觉顺序（绝对定位），以截图/实际渲染为准
- 按钮颜色必须看原型实际颜色：primary=蓝, error=红, warning=橙
- "新增"类按钮永远排 toolbarActions 第一个
- 操作列按钮严格与原型一一对应，不可自编
对照 Robot Admin 已有组件：
| 功能区 | 组件 | 来源 |
|---|---|---|
| 查询表单 | C_Form | @robot-admin/naive-ui-components |
| 操作工具栏 | C_ActionBar | @robot-admin/naive-ui-components |
| 数据表格 | C_Table | @robot-admin/naive-ui-components |
| 图标 | C_Icon | @robot-admin/naive-ui-components |
| 分割面板 | C_SplitPane | @robot-admin/naive-ui-components |
| 树形面板 | C_Tree | @robot-admin/naive-ui-components |
| 折叠面板 | C_CollapsePanel | @robot-admin/naive-ui-components |
| 步骤表单 | C_Form(steps layout) | @robot-admin/naive-ui-components |
| Tab 表单 | C_Form(tabs layout) | @robot-admin/naive-ui-components |
| 文件上传 | C_Upload | @robot-admin/naive-ui-components |
| 签名 | C_Signature | @robot-admin/naive-ui-components |
| 弹窗 | NModal / NDrawer | naive-ui |
| 分页 | 内置于 C_Table | — |
| 消息通知 | useMessage / useDialog | naive-ui |
{
"module": "模块中文名",
"pages": [
{
"name": "kebab-case-页面名",
"title": "页面中文标题",
"path": "src/views/[domain]/[module]/[kebab-case-name]/",
"mode": "LIST | MASTER_DETAIL | TREE_LIST | FORM_PAGE | FORM_MODAL | DETAIL_TABS | DASHBOARD | COMPOSITE",
"routeMeta": {
"title": "菜单中文名",
"icon": "mdi:icon-name",
"keepAlive": true
},
"query": [
{
"label": "字段中文名",
"prop": "fieldName",
"type": "input | select | date | daterange | ...",
"options": "选项数据说明（如有）",
"rules": "校验规则说明（如有）"
}
],
"columns": [
{
"title": "列标题",
"key": "fieldName",
"width": 120,
"sortable": true,
"render": "tag | text | custom",
"tagMap": { "值": "success | warning | error | info" }
}
],
"toolbar": [
{
"label": "新增",
"type": "primary",
"icon": "mdi:plus",
"permission": "sys:xxx:add"
}
],
"operations": [
{
"label": "编辑",
"type": "primary",
"show": "条件描述",
"permission": "sys:xxx:edit"
}
],
"form": [
{
"label": "字段中文名",
"prop": "fieldName",
"type": "input | select | ...",
"required": true,
"rules": "PRESET_RULES.xxx"
}
],
"subTables": [
{
"title": "子表名称",
"apiSuffix": "queryXxxList",
"columns": []
}
],
"notes": "业务备注/特殊逻辑说明"
}
]
}
page-spec JSON
├─→ api-contract SKILL → 生成 api.md
├─→ page-codegen SKILL → 生成 index.vue + data.ts + index.scss
└─→ route-sync SKILL → 注册到 dynamicRouter.json
注意：page-spec 是后续所有 Skill 的唯一输入源，确保数据准确完整。