---
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.'
---

# Skill: 原型解析（prototype-scan）

将 **Axure 导出的 HTML 原型包** 或 **详细设计文档（MD/Word/表格）** 解析为结构化的 **page-spec JSON 页面清单**，作为后续接口约定和代码生成的输入。

> **两种输入，同一输出**：输出格式完全相同（page-spec JSON），消费方（page-codegen）无需感知来源。

---

## 触发

- **模式 A（Axure）**：提供 Axure HTML 文件包目录，AI 全量扫描 HTML
- **模式 B（详设文档）**：提供 MD/Word/表格格式的详细设计文档，AI 解析结构化字段

---

## 步骤

### 1. 全量扫描 HTML（模式 A）

遍历所有 `.html` 文件，提取：

| 区域 | 提取内容                                               |
| ---- | ------------------------------------------------------ |
| 标题 | `<title>` / 标题文本 → 页面名称                        |
| 表格 | `<table>` / 网格布局 → 表格列定义                      |
| 表单 | `<input>` / `<select>` / 标签文本 → 查询条件和表单字段 |
| 按钮 | `<button>` / 链接文本 → 操作按钮列表                   |
| 弹窗 | 遮罩层 / 弹出层 → 弹窗组件                             |
| 树形 | 侧边栏 / 树形导航 → 树形结构                           |
| 注释 | Axure 注解 → 业务说明                                  |

### 2. 解析详设文档（模式 B）

从 MD/Word/表格中提取：

- 每个页面的功能描述
- 字段列表（中文名 + 类型 + 必填 + 校验规则）
- 接口 URL 约定
- 按钮/操作定义
- 业务流程说明

### 3. 交互模式分类

| 模式            | 特征                         | 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`     | 多种组合                     | 组合使用                               |

### 4. 字段提取

对每个页面提取 3 类字段（字段名建议 camelCase）：

**查询字段：**

```
中文名 | 建议字段名(camelCase) | 组件类型 | 备注
```

组件类型对照（C_Form options 中使用）：

| 原型表现   | type 值       | 备注                |
| ---------- | ------------- | ------------------- |
| 普通输入框 | `input`       | 默认类型            |
| 下拉选择   | `select`      | 配 options 选项数据 |
| 单日期     | `date`        | —                   |
| 日期范围   | `daterange`   | —                   |
| 月份选择   | `month`       | —                   |
| 数字输入   | `inputNumber` | —                   |
| 开关       | `switch`      | —                   |
| 级联选择   | `cascader`    | —                   |
| 树选择     | `treeSelect`  | —                   |

**表格列：**

```
列名(中文) | 字段名(camelCase) | 宽度建议 | 是否可排序 | 渲染方式(tag/text/custom)
```

**表单字段（弹窗/独立页面）：**

```
中文名 | 字段名(camelCase) | 类型 | 是否必填 | 校验规则 | 组件类型
```

### 5. 按钮提取

**工具栏按钮（C_ActionBar）：**

```
按钮标签 | 类型(primary/default/error/warning) | 图标 | 权限码(可选)
```

**操作列按钮：**

```
按钮标签 | 类型 | 条件显示(show函数描述) | 权限码(可选)
```

> ⚠️ **注意事项**：
>
> - Axure HTML DOM 顺序 ≠ 视觉顺序（绝对定位），以截图/实际渲染为准
> - 按钮颜色必须看原型实际颜色：primary=蓝, error=红, warning=橙
> - "新增"类按钮永远排 toolbarActions 第一个
> - 操作列按钮严格与原型一一对应，不可自编

### 6. 组件匹配

对照 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                         |

---

## 输出格式：page-spec JSON

```json
{
  "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 → 生成 TypeScript 请求/响应契约与 API 函数
  ├─→ page-codegen SKILL → 生成 index.vue + data.ts + index.scss
  └─→ route-sync SKILL   → 注册到 dynamicRouter.json
```

> **注意**：page-spec 是后续所有 Skill 的唯一输入源，确保数据准确完整。