M8 Codex MCP

# M8 页面生成提示词模板 > 使用 m8-generator-mcp 工具生成符合规范的页面代码 --- ## 🚀 推荐方式：使用 `create_page` 一站式工具 新增的 `create_page` 工具已内置所有前置流程，你只需要描述具体需求即可！ ### 工具自动完成： 1. ✅ 加载完整的 M8 开发规范（15 个规范文件） 2. ✅ 根据 Vue 版本生成符合规范的代码 3. ✅ 输出规范检查清单 4. ✅ 提供页面类型特定的开发提示 --- ## 📝 简化提示词示例 ### 表单页面 ``` 使用 create_page 创建用户登录页面： - module_name: "login" - vue_version: "3" - page_type: "form" - description: "用户登录" - requirements: "用户名输入框、密码输入框、登录按钮，使用 Util.ajax 提交" ``` ### 列表页面 ``` 使用 create_page 创建商品列表页面： - module_name: "goods_list" - vue_version: "3" - page_type: "list" - description: "商品列表" - requirements: "支持下拉刷新、分页加载，显示商品名称和价格，点击跳转详情" ``` ### 详情页面 ``` 使用 create_page 创建订单详情页面： - module_name: "order_detail" - vue_version: "3" - page_type: "detail" - description: "订单详情" - requirements: "根据 id 加载订单信息，显示订单号、金额、状态、商品列表" ``` --- ## ⚡ 一句话极简提示词 ``` create_page: module_name="user_register", vue_version="3", page_type="form", description="用户注册", requirements="姓名、手机号(验证)、邮箱、提交按钮" ``` ``` create_page: module_name="notice_list", vue_version="2", page_type="list", description="通知公告列表" ``` ``` create_page: module_name="article_detail", vue_version="3", page_type="detail", description="文章详情" ``` --- ## 📝 表单页面 ### 基础表单 ``` 请创建一个用户信息登记表单页面： 1. 调用 get_all_standards 获取完整规范 2. 调用 generate_module_structure： - module_name: "user_register" - page_name: "index" - description: "用户信息登记" 3. 调用 get_component_usage 查询：em-form, em-field, em-button 页面需求： - 姓名输入框（必填） - 手机号输入框（使用 Util.string.isMobile 验证） - 邮箱输入框（使用 Util.string.isEmail 验证） - 身份证输入框（使用 Util.string.isIdCard 验证） - 提交按钮 要求：生成完整文件（vue、scss、router.js、store、mock.js） ``` ### 带附件上传的表单 ``` 请创建一个信息提交表单页面，包含附件上传功能： 1. 调用 get_all_standards 获取完整规范 2. 调用 generate_module_structure： - module_name: "info_submit" - page_name: "index" - description: "信息提交表单" 3. 调用 get_component_usage 查询：em-form, em-field, em-uploader, em-button 4. 调用 search_utils 查询：upload 页面需求： - 标题输入框（必填） - 内容输入框（textarea，autosize） - 附件上传（使用 Util.upload） - 提交按钮 要求： - 附件上传使用 em-uploader 独立一行，不嵌入 em-field - 上传完成后显示 ejs.ui.toast 提示 ``` ### 带日期选择的表单 ``` 请创建一个预约登记表单页面： 1. 调用 get_all_standards 获取完整规范 2. 调用 generate_module_structure： - module_name: "appointment" - page_name: "index" - description: "预约登记" 3. 调用 get_component_usage 查询：em-form, em-field, em-button 页面需求： - 预约人姓名（必填） - 联系电话（手机号验证） - 预约日期（使用 ejs.ui.pickDate，readonly + is-link + clickable） - 预约时间（使用 ejs.ui.pickTime） - 备注（textarea） - 提交按钮 要求：日期时间选择优先使用 EJS API 而非组件 ``` --- ## 📋 列表页面 ### 基础列表 ``` 请创建一个通知公告列表页面： 1. 调用 get_all_standards 获取完整规范 2. 调用 generate_module_structure： - module_name: "notice_list" - page_name: "index" - description: "通知公告列表" 3. 调用 get_component_usage 查询：em-cell, em-minirefresh 4. 调用 search_utils 查询：ajax 页面需求： - 支持下拉刷新 - 支持分页加载 - 列表项显示标题、日期 - 点击跳转详情页（ejs.page.open） 要求：使用 em-minirefresh 组件实现分页 ``` ### 带搜索的列表 ``` 请创建一个商品搜索列表页面： 1. 调用 get_all_standards 获取完整规范 2. 调用 generate_module_structure： - module_name: "goods_search" - page_name: "index" - description: "商品搜索" 3. 调用 get_component_usage 查询：em-search, em-cell, em-minirefresh 页面需求： - 顶部搜索框 - 搜索结果列表（支持分页） - 列表项显示商品名称、价格、图片 - 点击跳转商品详情 要求：搜索时显示 ejs.ui.showWaiting，完成后 closeWaiting ``` --- ## 📄 详情页面 ### 基础详情 ``` 请创建一个通知详情页面： 1. 调用 get_all_standards 获取完整规范 2. 调用 generate_module_structure： - module_name: "notice_detail" - page_name: "index" - description: "通知详情" 3. 调用 get_component_usage 查询：em-cell 页面需求： - 从路由参数获取 id（Vue2: Util.getExtraDataByKey / Vue3: onLoad） - 显示标题、发布时间、内容 - 加载时显示 loading 要求：根据 Vue 版本使用正确的路由参数获取方式 ``` --- ## 🔄 综合页面 ### 列表 + 详情 + 编辑 ``` 请创建一个完整的用户管理模块，包含列表、详情、编辑三个页面： 1. 调用 get_all_standards 获取完整规范 2. 用户列表页（user_manage/list）： - 支持搜索、分页 - 点击查看详情 - 长按删除（ejs.ui.confirm 确认） 3. 用户详情页（user_manage/detail）： - 显示用户完整信息 - 编辑按钮跳转编辑页 4. 用户编辑页（user_manage/edit）： - 表单编辑用户信息 - 保存成功后返回列表 要求： - 三个页面共用一个模块目录 - 生成完整的 router.js 包含三个路由 - 生成 mock.js 包含列表、详情、保存三个接口 ``` --- ## ⚡ 快速生成（简化版） ### 一句话生成表单 ``` 创建登录页面（login），包含用户名、密码、登录按钮，使用 Util.ajax 提交 ``` ### 一句话生成列表 ``` 创建订单列表页面（order_list），支持下拉刷新和分页，点击跳转详情 ``` ### 一句话生成详情 ``` 创建订单详情页面（order_detail），根据 id 参数加载数据，显示订单信息 ``` --- ## 📌 工具对比 | 方式 | 工具 | 适用场景 | | -------- | ------------------------------------------------- | -------------------------------------- | | **推荐** | `create_page` | 一站式生成，自动加载规范，只需描述需求 | | 手动 | `get_all_standards` + `generate_module_structure` | 需要更精细控制时使用 | --- ## 🔧 create_page 参数说明 | 参数 | 必填 | 说明 | | -------------- | ---- | --------------------------------- | | `module_name` | ✅ | 模块名称，小写下划线格式 | | `vue_version` | ✅ | Vue 版本，"2" 或 "3" | | `description` | ✅ | 页面功能描述 | | `page_name` | ❌ | 页面名称，默认 "index" | | `page_type` | ❌ | 页面类型：form/list/detail/custom | | `requirements` | ❌ | 具体需求描述 | | `author` | ❌ | 作者名称 | | `components` | ❌ | 需要使用的组件列表 | | `skip_mock` | ❌ | 是否跳过生成 mock.js | --- ## 🧩 IOC 低码组件生成：使用 `create_ioc_page` 工具 > 生成符合 M8 低码平台规范的组件结构，包含完整的配置、事件、样式和插件 ### 工具自动生成： 1. ✅ `js/base.js` - 基础配置 2. ✅ `js/config.js` - 低码配置（属性面板、交互事件） 3. ✅ `mock/data.js` - 组件 Mock 数据 4. ✅ `css/index.scss` - BEM 规范样式 5. ✅ `index.vue` - 组件主文件（含 eventMixin、computed 处理） 6. ✅ `index.js` - 注册入口 7. ✅ `plugin/eventgenerate` - 事件生成插件 8. ✅ `plugin/boxoptions` - 容器配置插件 --- ### 📝 基础示例 ``` 使用 create_ioc_page 创建商品卡片组件： - component_name: "ProductCard" - display_name: "商品卡片" - description: "展示商品图片、名称、价格的卡片组件，支持点击跳转详情" ``` ### 带自定义配置的示例 ``` 使用 create_ioc_page 创建进度条组件： - component_name: "ProgressBar" - display_name: "进度条" - description: "可配置颜色和进度值的进度条组件" - config_options: - { name: "progress", displayName: "进度值", type: "number", defaultValue: 50 } - { name: "barColor", displayName: "进度条颜色", type: "color", defaultValue: "#1989fa" } - { name: "trackColor", displayName: "轨道颜色", type: "color", defaultValue: "#e5e5e5" } - { name: "showText", displayName: "显示文字", type: "boolean", defaultValue: true } ``` ### 带自定义事件的示例 ``` 使用 create_ioc_page 创建 Tab 切换组件： - component_name: "TabSwitch" - display_name: "Tab 切换" - description: "支持多 Tab 切换的组件，点击 Tab 触发切换事件" - custom_events: - { name: "onTabChange", displayName: "Tab 切换" } - { name: "onTabClick", displayName: "Tab 点击" } ``` ### 完整参数示例 ``` 使用 create_ioc_page 创建项目进度组件： - component_name: "ProjectProgress" - display_name: "项目进度" - description: "展示项目各阶段进度的组件，支持点击查看阶段详情" - author: "张三" - config_options: - { name: "title", displayName: "标题", type: "text", defaultValue: "项目进度" } - { name: "showHeader", displayName: "显示标题", type: "boolean", defaultValue: true } - { name: "activeColor", displayName: "激活颜色", type: "color", defaultValue: "#07c160" } - { name: "inactiveColor", displayName: "未激活颜色", type: "color", defaultValue: "#999999" } - custom_events: - { name: "onStageClick", displayName: "阶段点击" } - { name: "onProgressComplete", displayName: "进度完成" } - mock_data_structure: "包含 id、name（阶段名称）、status（已完成/进行中/未开始）、progress（进度百分比）字段的列表" ``` --- ### ⚡ 一句话极简提示词 ``` create_ioc_page: component_name="UserCard", display_name="用户卡片", description="展示用户头像、姓名、职位的卡片组件" ``` ``` create_ioc_page: component_name="StatusTag", display_name="状态标签", description="可配置颜色的状态标签组件" ``` ``` create_ioc_page: component_name="DataChart", display_name="数据图表", description="展示统计数据的图表组件，支持点击查看详情" ``` --- ### 🔧 create_ioc_page 参数说明 | 参数 | 必填 | 说明 | | --------------------- | ---- | -------------------------------------------------- | | `component_name` | ✅ | 组件名称，大驼峰命名（PascalCase），如 ProductList | | `display_name` | ✅ | 组件中文名称，如 "商品列表" | | `description` | ✅ | 组件功能描述 | | `author` | ❌ | 作者名称，默认 "developer" | | `config_options` | ❌ | 自定义属性配置项数组 | | `custom_events` | ❌ | 自定义事件数组（除标准事件外） | | `mock_data_structure` | ❌ | Mock 数据结构描述 | ### 📊 配置项类型参考 | type | 描述 | 适用场景 | | --------- | ------------- | ---------------------- | | `text` | 文本输入框 | 标题、描述、占位符 | | `boolean` | 开关 | 显示/隐藏、启用/禁用 | | `color` | 颜色选择器 | 背景色、字体色、边框色 | | `select` | 下拉选择框 | 对齐方式、布局模式 | | `number` | 数字输入框 | 字号、间距、数量 | | `image` | 图片上传/选择 | 背景图、图标 | | `array` | 数组/列表配置 | Tab 列表、选项列表 | ### ⚡ 标准事件（自动生成） | 事件名 | 显示名 | 触发时机 | | ----------- | -------- | --------------------- | | `onMounted` | 加载完成 | 组件 mounted 生命周期 | | `onClick` | 点击事件 | 组件被点击时 | | `onChange` | 值变动 | 组件内部状态改变时 | --- ### 📁 生成的目录结构 ``` components/card_components/[ComponentName]/ ├── css/ │ └── index.scss # 样式文件（BEM 规范） ├── js/ │ ├── base.js # 基础配置（勿改 module_name） │ └── config.js # 低码配置（属性/事件） ├── mock/ │ └── data.js # Mock 数据 ├── plugin/ │ ├── eventgenerate/ # 事件生成插件 │ │ └── index.js │ └── boxoptions/ # 容器配置插件 │ └── index.js ├── index.js # 注册入口 └── index.vue # 组件主文件 ``` --- ### 💡 开发提示 1. **组件命名**：必须使用大驼峰（PascalCase），如 `ProductList`、`UserInfo` 2. **根类名**：模板中必须包含 `epoint-component` 类 3. **数据处理**：使用 `myData` computed 处理 pdata 和 mockData 优先级 4. **样式单位**：`boxOptions` computed 自动为数值添加 `px` 单位 5. **事件触发**：使用 `this.eventGenerate('事件名', 参数)` 触发配置的事件 6. **🔥 组件复用**：优先使用 M8 组件库（`em-*`）进行组合，避免重复造轮子 --- ### 🔍 M8 组件库查询 开发 IOC 组件时，**优先使用已有的 M8 组件库（em-\* 组件）进行组合**。M8 组件库包含 70+ 常用组件，AI 会自动查询这些组件的文档。 **常用组件速查**： | 组件 | 用途 | 使用场景 | | ---------------- | -------- | ------------------------------------------------- | | `em-field` | 输入框 | 表单输入、只读展示（配合 `readonly` + `is-link`） | | `em-cell` | 单元格 | 列表项、详情展示 | | `em-button` | 按钮 | 操作触发 | | `em-popup` | 弹出层 | 底部/中央弹窗 | | `em-dialog` | 对话框 | 确认提示 | | `em-search` | 搜索框 | 搜索功能 | | `em-form` | 表单 | 表单容器、校验 | | `em-uploader` | 上传 | 文件/图片上传 | | `em-minirefresh` | 下拉刷新 | 列表分页加载 | | `em-tab` | 标签页 | Tab 切换 | **示例：组合组件创建 IOC 组件** ``` 使用 create_ioc_page 创建人员选择组件： - component_name: "PersonSelector" - description: "点击 em-field 弹出 em-popup，内含 em-search + em-cell 列表选择人员" ``` > **提示**：对话时直接问 AI "em-xxx 怎么用？" 即可获取组件用法。