# M8 MCP Server

M8 移动前端跨端框架 MCP Server - 提供文档查询、智能推荐和代码生成服务。

## 功能特性

- 📚 **文档搜索** - 搜索 M8 框架文档，支持关键词搜索和分类过滤
- 🧩 **组件查询** - 获取 UI 组件的详细信息，包括 Props、Events、示例代码
- 🔌 **API 查询** - 获取 EJS 原生 API 的详细信息，包括参数、返回值、平台支持
- 🛠️ **工具查询** - 获取 Util 工具方法的详细信息
- 📏 **编码规范** - 获取 CSS、JavaScript、Vue、项目结构等编码规范
- 💡 **智能推荐** - 根据需求智能推荐组件、API 或工具方法
- ⚡ **代码生成** - 生成符合 M8 规范的 Vue 组件、JavaScript、SCSS 代码

## 安装

```bash
npm install -g m8-mcp-server
```

或使用 npx 直接运行：

```bash
npx m8-mcp-server
```

## MCP 配置

在 Claude Desktop 或其他 MCP 客户端中配置：

```json
{
  "mcpServers": {
    "m8": {
      "command": "npx",
      "args": ["m8-mcp-server"]
    }
  }
}
```

或者如果已全局安装：

```json
{
  "mcpServers": {
    "m8": {
      "command": "m8-mcp-server"
    }
  }
}
```

## 可用工具

### search_docs

搜索 M8 框架文档。

**参数：**

- `query` (必需): 搜索关键词
- `category` (可选): 文档分类 (`ejs-api`, `ui-component`, `util-tool`, `typical-case`, `standard`)
- `limit` (可选): 最大返回数量，默认 10

**示例：**

```
搜索 "button" 相关文档
搜索 UI 组件中的 "输入框"
```

### get_component_info

获取 UI 组件的详细信息。

**参数：**

- `componentName` (必需): 组件名称，如 `em-button`, `button`, `em-field`, `field`

**示例：**

```
获取 button 组件信息
获取 em-field 组件的 Props 和 Events
```

### get_api_info

获取 EJS 原生 API 的详细信息。

**参数：**

- `module` (必需): API 模块名称 (`ui`, `page`, `storage`, `device`)
- `method` (可选): API 方法名称

**示例：**

```
获取 ejs.ui 模块的所有方法
获取 ejs.ui.toast 方法的详细信息
```

### get_util_info

获取 Util 工具方法的详细信息。

**参数：**

- `category` (必需): Util 分类 (`string`, `date`, `ajax`, `common`)
- `method` (可选): 方法名称

**示例：**

```
获取 Util.ajax 的使用方法
获取字符串处理工具
```

### get_coding_standard

获取编码规范。

**参数：**

- `type` (必需): 规范类型 (`css`, `javascript`, `vue`, `full-page`)
- `keyword` (可选): 具体规则关键词

**示例：**

```
获取 CSS 编码规范
获取 Vue 组件命名规范
```

### generate_code

生成符合 M8 规范的代码。

**参数：**

- `type` (必需): 代码类型，支持以下方式：
  - 单选字符串: `vue-component`, `javascript`, `scss`, `api-call`, `full-page`
  - 多选数组: `["vue-component", "scss"]` 一次生成多种代码
  - `full-page`: 快捷方式，等同于 `["vue-component", "scss", "router", "mock"]`
- `requirement` (必需): 需求描述
- `vueVersion` (可选): Vue 版本 (2 或 3)，默认 2
- `components` (可选): 使用的组件列表
- `modulePath` (可选): 模块路径，默认自动生成
- `useMock` (可选): 是否使用 Mock 数据，默认 true

### generate_card_component

根据提示词生成低码组件代码（符合 card_components 规范）。

**参数：**

- `componentName` (必需): 组件名称 (PascalCase)，如 `TestCard`
- `requirement` (必需): 需求描述，系统会自动推断配置项
- `projectName` (可选): 项目名称

**示例：**

```
生成一个带有标题和图片的卡片组件，名称为 ImageCard
```

### recommend_solution

根据需求智能推荐解决方案。

**参数：**

- `requirement` (必需): 需求描述
- `type` (可选): 需求类型 (`ui`, `data`, `native`, `general`)

**示例：**

```
我需要显示一个提示消息
我需要实现表单提交功能
```

---

## 📝 代码生成提示词示例

以下是各种常见场景的提示词模板，可直接使用或根据需求修改：

### 🔐 登录页面

```json
{
  "type": "full-page",
  "requirement": "登录页面，包含用户名、密码输入框和登录按钮",
  "vueVersion": 2,
  "components": ["em-field", "em-button"]
}
```

**自然语言方式：**

```
帮我生成一个登录页面，包含用户名、密码输入框和登录按钮，使用 Vue2
```

### 📋 注册表单

```json
{
  "type": "full-page",
  "requirement": "用户注册表单，包含姓名、手机号（需验证格式）、身份证号（需验证格式）、密码输入框和注册按钮",
  "vueVersion": 2,
  "components": ["em-form", "em-field", "em-button"]
}
```

**自然语言方式：**

```
生成一个用户注册表单页面，需要填写姓名、手机号、身份证号和密码，手机号和身份证需要格式校验
```

### 📝 文件上传表单

```json
{
  "type": "full-page",
  "requirement": "信息采集表单，包含姓名、手机号输入框和附件上传功能",
  "vueVersion": 2,
  "components": ["em-form", "em-field", "em-uploader", "em-button"]
}
```

**自然语言方式：**

```
生成一个信息采集页面，需要输入姓名、手机号，还要能上传附件
```

### 📃 列表页面

```json
{
  "type": "full-page",
  "requirement": "待办事项列表页面，包含搜索框和下拉刷新列表，每项显示标题、状态和日期",
  "vueVersion": 2,
  "components": ["em-search", "em-minirefresh", "em-cell"]
}
```

**自然语言方式：**

```
生成一个待办事项列表页面，需要有搜索功能和下拉刷新
```

### 📄 详情页面

```json
{
  "type": "full-page",
  "requirement": "订单详情页面，显示订单编号、下单时间、商品信息、金额等，底部有确认和取消按钮",
  "vueVersion": 2,
  "components": ["em-cell", "em-panel", "em-button"]
}
```

**自然语言方式：**

```
生成一个订单详情页面，展示订单编号、时间、商品信息和金额，底部有确认和取消按钮
```

### 🗓️ 日期选择表单

```json
{
  "type": "full-page",
  "requirement": "请假申请表单，包含请假类型选择、开始日期、结束日期选择、请假事由输入和提交按钮",
  "vueVersion": 2,
  "components": [
    "em-form",
    "em-picker",
    "em-datepicker",
    "em-field",
    "em-button"
  ]
}
```

**自然语言方式：**

```
生成一个请假申请页面，需要选择请假类型、开始和结束日期，填写请假事由
```

### 🔧 Vue3 Composition API 示例

```json
{
  "type": "full-page",
  "requirement": "用户个人中心页面，显示头像、昵称、手机号，包含修改信息和退出登录功能",
  "vueVersion": 3,
  "components": ["em-cell", "em-button"]
}
```

**自然语言方式：**

```
使用 Vue3 生成一个用户个人中心页面，显示头像、昵称和手机号，可以修改信息和退出登录
```

---

## ⚡ 快速使用技巧

### 1. 智能组件推荐

如果不指定 `components`，系统会根据需求描述自动推荐合适的组件：

```json
{
  "type": "full-page",
  "requirement": "用户注册表单，包含手机号、密码输入框"
}
```

系统会自动使用 `em-form`、`em-field`、`em-button` 组件。

### 2. 文件上传支持

需求中包含"附件"、"上传"等关键词时，自动使用 `em-uploader` 组件。

---

## 📁 生成的文件结构

使用 `full-page` 类型时，会生成以下完整的文件结构：

```
src/pages/[模块名]/
├── index.vue          # Vue 页面组件
├── router.js          # 路由配置
├── mock.js            # Mock 数据
└── css/
    └── [模块名].scss  # 样式文件
```

## 开发

```bash
# 安装依赖
npm install

# 构建
npm run build

# 运行测试
npm test

# 开发模式
npm run dev
```

## 技术栈

- TypeScript
- Model Context Protocol SDK
- Vitest (测试框架)
- fast-check (属性测试)

## 许可证

MIT