# m8-generator-mcp
M8 框架智能辅助工具 - 基于 MCP (Model Context Protocol) 协议
专门为 M8 移动端开发框架设计的 AI 辅助工具集，集成了开发规范、代码生成、规范检查等核心能力。支持通过 Cursor、Windsurf 等 AI 编辑器无缝调用。
## ✨ 核心功能
- **🚀 一站式页面生成 (`create_page`)**: 只需描述需求，自动完成规范加载、代码生成（Vue/SCSS/JS）、Mock 数据创建，并输出规范检查报告。
- **🧩 IOC 组件生成 (`create_ioc_page`)**: 专为低码平台设计，自动生成符合 IOC 规范的组件结构（Config/Mock/Vue/Plugin）。
- **🔍 规范自动验证 (`validate_code_standards`)**: 实时检查代码是否符合 M8 开发规范（文件头注释、全局变量使用、样式穿透语法等）。
- **🤖 AI 配置助手 (`get_prompt`)**: 获取最佳 System Prompt，让你的 AI 助手瞬间变身 M8 专家。
## 🛠️ 安装与配置
在 IDE (Cursor/VSCode/Windsurf) 的 MCP 配置文件中添加：
```json
{
"mcpServers": {
"m8-codex-mcp": {
"command": "npx",
"args": ["-y", "m8-codex-mcp@latest"]
}
}
}
```
## 🧰 工具详解
### 1. create_page (创建页面)
一站式生成符合 M8 规范的业务页面。
**参数说明**:
- `module_name` (必填): 模块名称（小写下划线，如 `user_list`）
- `vue_version` (必填): Vue 版本，`"2"` 或 `"3"`
- `description` (必填): 页面功能描述
- `page_name`: 页面名称，默认为 `index`
- `page_type`: 页面类型 (`form` | `list` | `detail` | `custom`)，默认为 `custom`
- `requirements`: 具体需求细节（如：包含搜索框、下拉刷新等）
- `components`: 需要使用的组件列表（如 `['em-button', 'em-field']`）
**示例**:
> "使用 create_page 工具创建请假申请页面：
- module_name: "leave_apply"
- vue_version: "2"
- page_type: "form"
- description: "请假申请"
- requirements: "请假类型（单选：事假/病假/年假）、开始日期（日期选择）、结束日期（日期选择）、请假原因（textarea）、提交按钮"
### 2. create_ioc_page (创建低码组件)
生成符合 M8 低码平台 (IOC) 规范的组件结构。
**参数说明**:
- `component_name` (必填): 组件名 (PascalCase，如 `ProductCard`)
- `display_name` (必填): 中文显示名
- `description` (必填): 功能描述
- `config_options`: 自定义属性配置列表
- `custom_events`: 自定义事件列表
**示例**:
> "使用 create_ioc_page 工具创建商品卡片组件：
- component_name: "ProductCard"
- display_name: "商品卡片"
- description: "展示商品图片、名称、价格，支持点击跳转"
- config_options: [{"name": "titleColor", "displayName": "标题颜色", "type": "color"}, {"name": "showPrice", "displayName": "显示价格", "type": "boolean", "defaultValue": true}]
- custom_events: [{"name": "onBuyClick", "displayName": "点击购买"}]
**💡 组件复用**：开发时优先使用 M8 组件库（`em-*`）
```
"查询 em-field 组件用法"
"em-popup 有哪些 Props"
```
### 3. validate_code_standards (规范验证)
检查已有代码是否符合 M8 规范。
**支持检查项**:
- ✅ 全局变量 (Util/Config) 禁止 import
- ✅ Vue2/Vue3 样式穿透语法 (`::v-deep` vs `:deep()`)
- ✅ Vue3 `<script setup>` 语法强制
- ✅ 文件头部注释完整性
- ✅ 样式文件分离 (@import scss)
### 4. get_prompt (获取 AI 配置)
获取专为 M8 开发优化的 System Prompt。
建议将返回的内容复制到项目的 `.cursorrules` 或 `.windsurfrules` 文件中，以提升 AI 的编码准确率。
## 📚 包含的知识库
- **UI 组件库**: 70+ 组件文档（直接问 AI "查询 em-xxx 用法" 即可）
- **开发规范**: 完整的 M8 前端开发规范 (01-project 到 07-router)
- **最佳实践**: Vue2/Vue3 差异化处理方案
## Development
```bash
# Install dependencies
npm install
# Build the project
npm run build
# Watch for changes
npm run watch
```
## License
MIT
