---
description: 使用 m8-generator-mcp 工具创建符合 M8 规范的页面
---
# M8 页面生成工作流
## ⚠️ 重要前置步骤（必须按顺序执行）
**步骤 1：检查 Vue 版本**
1. 读取用户项目的 `package.json` 文件
2. 查找 `dependencies` 或 `devDependencies` 中的 `vue` 版本
3. 根据版本号判断：
- `^2.x.x` 或 `~2.x.x` → 使用 `vue_version: "2"`
- `^3.x.x` 或 `~3.x.x` → 使用 `vue_version: "3"`
**步骤 2：加载完整规范（🔴 关键步骤）**
1. 调用 `get_all_standards` 工具获取完整的 M8 开发规范
2. 传入 `vue_version` 参数获取版本特定规范
3. 仔细阅读返回的规范内容，确保后续代码严格遵循
**步骤 3：生成代码**
1. 调用 `generate_module_structure` 生成模块结构
2. 根据需求调用其他工具获取组件用法
**Mock 数据规范：**
- 除非用户明确说明"不使用mock"，否则必须生成 `mock.js` 文件
---
## 工具列表
| 工具名 | 用途 | 调用时机 |
| --------------------------- | -------------------------------------- | -------------- |
| `get_all_standards` | 🔴 获取完整开发规范（15个规范文件） | **必须首先调用** |
| `generate_module_structure` | 生成模块目录结构和文件模板 | 加载规范后调用 |
| `get_component_usage` | 获取 UI 组件用法 | 按需调用 |
| `search_utils` | 搜索 Util 工具函数 | 按需调用 |
| `get_standard_rules` | 获取单个类别的规范文档 | 按需调用 |
| `validate_code_standards` | 验证代码是否符合规范 | 生成后验证 |
---
## 精简提示词模板
### 模板 A：创建表单页面
```
请创建一个 [页面功能] 页面：
0. 检查项目 package.json 确定 Vue 版本
1. 🔴 调用 get_all_standards 获取完整规范（传入 vue_version）
2. 调用 generate_module_structure 生成模块结构：
- module_name: "[module_name]"
- page_name: "index"
- vue_version: "[根据package.json判断]"
- description: "[页面描述]"
3. 调用 get_component_usage 查询: em-form, em-field, em-button
4. 调用 search_utils 查询: mobile (手机号验证)
5. 页面需求：[具体需求描述]
6. 调用 validate_code_standards 验证生成的代码
要求：使用 Util.string.isMobile 验证手机号，生成完整文件包含 router.js 和 mock.js
```
### 模板 B：创建列表页面
```
请创建一个 [列表功能] 页面：
0. 检查项目 package.json 确定 Vue 版本
1. 🔴 调用 get_all_standards 获取完整规范
2. 调用 generate_module_structure 生成模块结构
3. 调用 get_component_usage 查询: em-cell, em-pull-refresh, em-list
4. 调用 search_utils 查询: ajax
5. 页面需求：支持下拉刷新、分页加载，包含 mock.js 模拟数据
6. 调用 validate_code_standards 验证生成的代码
```
---
## 示例：用户信息编辑页面
```
请创建用户信息编辑页面：
0. 检查 package.json 中的 vue 版本
1. 🔴 get_all_standards: vue_version="[根据检查结果]", include_checklist=true
2. generate_module_structure: module_name="user_edit", page_name="index", vue_version="[根据检查结果]"
3. get_component_usage: em-form, em-field, em-button
4. search_utils: mobile
5. 需求：
- 姓名输入框（必填）
- 手机号输入框（Util.string.isMobile 验证）
- 提交按钮
6. 生成完整文件：index.vue, css/user_edit.scss, router.js, store.ts/store.js, mock.js
7. validate_code_standards: 验证生成的 Vue 文件
```
---
## 规范类别速查（共 15 个规范文件）
| 目录 | 文件 | 关键内容 |
| ------------- | ------------------------------------------------------------ | ------------------------------ |
| 01-project | naming.md, structure.md, version-detection.md | 命名、目录结构、版本检测 |
| 02-vue | basic.md, component.md, examples.md, performance.md, state-management.md | 基础规范、组件、示例、性能、状态管理 |
| 03-css | index.md | BEM 命名、样式分离 |
| 04-api | ajax.md, ejs-api.md, util.md | 请求、EJS API、工具函数 |
| 05-typescript | index.md | 类型定义规范 |
| 06-mock | index.md | Mock 数据格式 |
| 07-router | index.md | 路由配置 |
---
## Vue 版本判断规则
```javascript
// package.json 中的 vue 版本判断
{
"dependencies": {
"vue": "^2.7.14" // → vue_version: "2"
// 或
"vue": "^3.4.0" // → vue_version: "3"
}
}
```
| Vue 版本范围 | vue_version 参数 | Store 文件 | 样式穿透语法 |
| ------------ | ---------------- | ---------------- | ----------------- |
| 2.x.x | "2" | store.js (Vuex) | ::v-deep .class |
| 3.x.x | "3" | store.ts (Pinia) | :deep(.class) |
---
## Mock 数据生成规则
**默认行为**：始终生成 `mock.js` 文件
**跳过条件**：仅当用户明确说明以下情况时才不生成 mock：
- "不使用 mock"
- "不需要 mock"
- "真实接口"
- "对接真实 API"
**Mock 文件结构**：
```javascript
import Mock from '@mock';
const resultData = [
{
methodUrl: '/rest/api/[module]/[action]',
input: {},
output: Mock.mock({
'status': { 'code': 0, 'text': '成功' },
'infolist|10-20': [{ /* 列表项 */ }],
}),
},
];
export default resultData;
```
---
## 🔴 代码生成检查清单
生成代码后，请确认以下要点：
### 必须检查项
- [ ] 文件顶部包含完整头部注释（@作者、@创建时间、@修改时间、@版本、@版权、@描述）
- [ ] 使用 4 空格缩进
- [ ] 全局变量（Config、Util、ejs）直接使用，未 import
- [ ] 样式使用 @import 引入，添加 scoped 属性
- [ ] Vue3 使用 `<script setup>`，Vue2 使用 Options API
- [ ] 样式穿透语法与 Vue 版本匹配
- [ ] BEM 命名规范（block__element--modifier）
- [ ] router.js 中未 import Vue 组件
- [ ] mock.js 使用 `import Mock from '@mock'`
