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 配置文件中添加：

{
  "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

# Install dependencies
npm install

# Build the project
npm run build

# Watch for changes
npm run watch

License

MIT